|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
css巧用兩符號#和下橫線解決div高寬的瀏覽器兼容性問題
作者:admin 時間:2013-11-19 20:15:47 瀏覽:在復雜的網頁框架布局中，div起了絕對的主導作用，而又因為div的語法在各個瀏覽器中的表現并不一致，因此div的瀏覽器兼容性寫法就起了至關重要的意義。
瀏覽器兼容性問題的產生
以前，在IE8和Chrome等瀏覽器尚未風靡互聯網的時候，我們只需hack一下IE6和Firefox瀏覽器即可，那時Firefox成了相對意義上的“標準”瀏覽器，不過，時過境遷，現在最流行的瀏覽器不是Firefox，也不是IE6了，而是Chrome和IE8等。
但是，對于網頁設計者來說，這并不是一個好的事情，因為，Chrome和IE8，跟Firefox、IE6的標準也不一樣，之前hack過的css樣式，在Firefox和IE6里顯示正常，但是現在在Chrome和IE8瀏覽器里顯示卻不一定正常了，有的甚至有嚴重的錯位，或直接顯示不出來。為此，網頁設計者就需要重新hack一次css，讓它兼容目前所有的流行瀏覽器。
div瀏覽器兼容性寫法 !important 無能為力
網頁的框架結構布局固定，由div來完成，因此，div的高度和寬度的瀏覽器兼容性寫法是首要考慮的問題。
Firefox時代，引入了一個hack屬性，那就是“!important”，寫法如下：
.div{height:23px !important;height:21px}
Firefox可以認“!important”，但是IE6不認，所以上述的css寫法可以兼容了Firefox和IE6瀏覽器。
不過，上述寫法在現在已經行不通了，因為，IE8和Chrome雖然也認“!important”這個屬性，但是它們各自的div box容器高寬標準是不同的，換句話來說，它們的div box對內部的“padding”、“margin”的處理不一樣，這樣一來，如果div存在“padding”、“margin”等屬性，或者內部又嵌入了<p>、<div>等區(qū)域的話，那么Firefox的“height:23px !important;”與IE8的“height:23px !important;”以及Chrome的“height:23px !important;”得到的最后顯示出來的高度就不一樣。因此，需要hack這個高度！
div瀏覽器兼容性寫法 終極解決方法
這個問題，曾經令我狂抓，不過最后總算找到了一個通俗易容的簡單的兼容性hack寫法。下面看看hack的代碼：
.div{height:23px;#height:22px;_height:21px}
這個寫法能很好的兼容目前的所有流行瀏覽器。我們發(fā)現，這個css已經摒棄了“!important”這個屬性，取而代之的是新增了一個“#”和一個“_”，這個怎么解釋呢？首先，“height:23px”是通用寫法，每個瀏覽器都適用；其次，“#height:22px”是hack IE8瀏覽器；再次，“_height:21px”是hack IE6瀏覽器。這是因為，Firefox和Chrome不認“#”，但IE8認，而“_”只有IE6認。
理解了上述的解釋，那么我們在hack div的高寬瀏覽器兼容性時，就游刃有余，駕輕就熟了。
您可能對以下文章也感興趣
標簽: hack
