瀏覽器分辨率不一的浮動問題解決方法

字號:


    在設計導航欄時因為總的content寬度設定為70%,用了<ul><li>標簽來排列導航內(nèi)容
    代碼如下:
    .meun ul{
    width: 100%;
    height: 40px;
    font: bolder 18px/40px 微軟雅黑,微軟雅黑,microsoft yahei;
    border: 1px solid rgb(206, 24, 0);
    background: url(../images/menu_bg.png) repeat-x scroll 0px 0px transparent;
    margin: 0px auto;
    list-style:none outside none;
    }
    給每個,<li>設置浮動
    代碼如下:
    .meun ul li{
    float:left;
    }
    再給每個<li>的class設置屬性
    代碼如下:
    .linormal{
    width:16.7%;
    height:40px;
    text-align: center;
    border-left:1px solid rgb(255, 164, 123);
    border-right:1px solid rgb(221, 47, 0);
    float: left;
    }
    linormal下的<a>標簽的width是100%,開始的時候也和linormal設置成16.7%,導致文字不能顯示全部,
    代碼如下:
    .linormal a{
    width:100%;
    height:40px;
    display:block;
    color:#fff;
    text-decoration:none;
    }
    再就是<a> 標簽的:hover屬性了
    代碼如下:
    .linormal a:hover{
    background: url(../images/menu_bg.png) repeat-x scroll 0px -40px transparent;
    text-decoration: none;
    color: rgb(255, 255, 255);
    }
    上面的代碼可以隨著瀏覽器窗口的大小進行相應的改變大小,因為是按照百分比來定的寬度,但隨著窗口的越來越小,導致導航欄的<li>中的寬度小于字體的寬度,字體
    下浮,整個頁面完全亂了。
    后來便在menu下面加了個寬度的id,命名為wid,即
    代碼如下:
    .wid {
    width:1000px;
    }
    在html頁面內(nèi),調(diào)用方式為
    代碼如下:
    <div id=menu>
    <div class=wid >
    ...
    </div>
    </div>
    這樣就調(diào)整了當改變窗口大小時,部分內(nèi)容會在縮小的部分里看不到(這里表述不大清楚,大致意思是縮小窗口時,不會導致頁面容器相應的變小,而是只顯示一部分),這樣就不會出現(xiàn)頁面布局出現(xiàn)混亂的現(xiàn)象了。