亚洲欧美自拍另类丝袜卡通,国产精品免费在线观看

技術(shù)頻道 - html技術(shù)

css巧用兩符號(hào)#和下橫線解決div高寬的瀏覽器兼容性問(wèn)題

作者:admin 時(shí)間:2013-11-19 20:15:47 瀏覽:

在復(fù)雜的網(wǎng)頁(yè)框架布局中，div起了絕對(duì)的主導(dǎo)作用，而又因?yàn)閐iv的語(yǔ)法在各個(gè)瀏覽器中的表現(xiàn)并不一致，因此div的瀏覽器兼容性寫法就起了至關(guān)重要的意義。

瀏覽器兼容性問(wèn)題的產(chǎn)生

以前，在IE8和Chrome等瀏覽器尚未風(fēng)靡互聯(lián)網(wǎng)的時(shí)候，我們只需hack一下IE6和Firefox瀏覽器即可，那時(shí)Firefox成了相對(duì)意義上的“標(biāo)準(zhǔn)”瀏覽器，不過(guò)，時(shí)過(guò)境遷，現(xiàn)在最流行的瀏覽器不是Firefox，也不是IE6了，而是Chrome和IE8等。

但是，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說(shuō)，這并不是一個(gè)好的事情，因?yàn)椋珻hrome和IE8，跟Firefox、IE6的標(biāo)準(zhǔn)也不一樣，之前hack過(guò)的css樣式，在Firefox和IE6里顯示正常，但是現(xiàn)在在Chrome和IE8瀏覽器里顯示卻不一定正常了，有的甚至有嚴(yán)重的錯(cuò)位，或直接顯示不出來(lái)。為此，網(wǎng)頁(yè)設(shè)計(jì)者就需要重新hack一次css，讓它兼容目前所有的流行瀏覽器。

div瀏覽器兼容性寫法 !important 無(wú)能為力

網(wǎng)頁(yè)的框架結(jié)構(gòu)布局固定，由div來(lái)完成，因此，div的高度和寬度的瀏覽器兼容性寫法是首要考慮的問(wèn)題。

Firefox時(shí)代，引入了一個(gè)hack屬性，那就是“!important”，寫法如下：

.div{height:23px !important;height:21px}

Firefox可以認(rèn)“!important”，但是IE6不認(rèn)，所以上述的css寫法可以兼容了Firefox和IE6瀏覽器。

不過(guò)，上述寫法在現(xiàn)在已經(jīng)行不通了，因?yàn)椋琁E8和Chrome雖然也認(rèn)“!important”這個(gè)屬性，但是它們各自的div box容器高寬標(biāo)準(zhǔn)是不同的，換句話來(lái)說(shuō)，它們的div box對(duì)內(nèi)部的“padding”、“margin”的處理不一樣，這樣一來(lái)，如果div存在“padding”、“margin”等屬性，或者內(nèi)部又嵌入了<p>、<div>等區(qū)域的話，那么Firefox的“height:23px !important;”與IE8的“height:23px !important;”以及Chrome的“height:23px !important;”得到的最后顯示出來(lái)的高度就不一樣。因此，需要hack這個(gè)高度！

div瀏覽器兼容性寫法終極解決方法

這個(gè)問(wèn)題，曾經(jīng)令我狂抓，不過(guò)最后總算找到了一個(gè)通俗易容的簡(jiǎn)單的兼容性hack寫法。下面看看hack的代碼：

.div{height:23px;#height:22px;_height:21px}

這個(gè)寫法能很好的兼容目前的所有流行瀏覽器。我們發(fā)現(xiàn)，這個(gè)css已經(jīng)摒棄了“!important”這個(gè)屬性，取而代之的是新增了一個(gè)“#”和一個(gè)“_”，這個(gè)怎么解釋呢？首先，“height:23px”是通用寫法，每個(gè)瀏覽器都適用；其次，“#height:22px”是hack IE8瀏覽器；再次，“_height:21px”是hack IE6瀏覽器。這是因?yàn)?，F(xiàn)irefox和Chrome不認(rèn)“#”，但I(xiàn)E8認(rèn)，而“_”只有IE6認(rèn)。

理解了上述的解釋，那么我們?cè)趆ack div的高寬瀏覽器兼容性時(shí)，就游刃有余，駕輕就熟了。