欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時間：2014-05-18 10:17:48   作者：佚名   我要評論
這篇文章主要介紹了瀏覽器分辨率不一的浮動問題解決方法，需要的朋友可以參考下
在設(shè)計導(dǎo)航欄時因為總的content寬度設(shè)定為70%,用了<ul><li>標(biāo)簽來排列導(dǎo)航內(nèi)容

復(fù)制代碼
代碼如下:

.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>設(shè)置浮動

復(fù)制代碼
代碼如下:

.meun ul li{
float:left;
}

再給每個<li>的class設(shè)置屬性

復(fù)制代碼
代碼如下:

.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>標(biāo)簽的width是100%，開始的時候也和linormal設(shè)置成16.7%，導(dǎo)致文字不能顯示全部，

復(fù)制代碼
代碼如下:

.linormal a{
width:100%;
height:40px;
display:block;
color:#fff;
text-decoration:none;
}

再就是<a> 標(biāo)簽的:hover屬性了

復(fù)制代碼
代碼如下:

.linormal a:hover{
background: url("../images/menu_bg.png") repeat-x scroll 0px -40px transparent;
text-decoration: none;
color: rgb(255, 255, 255);
}

上面的代碼可以隨著瀏覽器窗口的大小進行相應(yīng)的改變大小，因為是按照百分比來定的寬度，但隨著窗口的越來越小，導(dǎo)致導(dǎo)航欄的<li>中的寬度小于字體的寬度，字體

下浮，整個頁面完全亂了。

后來便在menu下面加了個寬度的id，命名為wid，即

復(fù)制代碼
代碼如下:

.wid {
width:1000px;
}

在HTML頁面內(nèi)，調(diào)用方式為

復(fù)制代碼
代碼如下:

<div id="menu">
<div class="wid" >
...
</div>
</div>

這樣就調(diào)整了當(dāng)改變窗口大小時，部分內(nèi)容會在縮小的部分里看不到（這里表述不大清楚，大致意思是縮小窗口時，不會導(dǎo)致頁面容器相應(yīng)的變小，而是只顯示一部分），這樣就不會出現(xiàn)頁面布局出現(xiàn)混亂的現(xiàn)象了。

相關(guān)文章

  • 淺談原生頁面兼容IE9問題的解決方案

    這篇文章主要介紹了淺談原生頁面兼容IE9問題的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起
    2020-12-16

  • 新版chrome瀏覽器設(shè)置允許跨域的實現(xiàn)

    這篇文章主要介紹了新版chrome瀏覽器設(shè)置允許跨域的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起
    2020-11-30

  • css hack之\9和\0就可能對hack IE11\IE9\IE8無效

    每次設(shè)計一張網(wǎng)頁或一個表單，都被各種瀏覽器的兼容問題傷透腦筋，尤其是IE家族。在做兼容性設(shè)計時，我們往往會使用各種瀏覽器能識別的獨特語法進行hack，從而達(dá)到各種瀏覽
    2020-03-20

  • css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼

    這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下
    2020-03-20

  • 解決CSS瀏覽器兼容性問題的4種方案

    這篇文章主要介紹了解決CSS瀏覽器兼容性問題的4種方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)
    2020-02-28

  • 常見的瀏覽器兼容性問題(小結(jié))

    這篇文章主要介紹了常見的瀏覽器兼容性問題(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)
    2020-02-20

  • border-radius IE8兼容處理的方法

    這篇文章主要介紹了border-radius IE8兼容處理的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)
    2020-02-12

  • 淺談遇到的幾個瀏覽器兼容性問題

    這篇文章主要介紹了淺談遇到的幾個瀏覽器兼容性問題，詳細(xì)的介紹了幾種我遇到的問題和解決方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-09-26

  • base64圖片在各種瀏覽器的兼容性處理

    這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-14

  • 對常見的css屬性進行瀏覽器兼容性總結(jié)(推薦)

    這篇文章主要介紹了對常見的css屬性進行瀏覽器兼容性總結(jié)(推薦)的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-20

最新評論