Firefox/Chrome…下的CSS Hack調試

Firefox/Chrome...下的CSS Hack調試發布時間：7/25/2010 11:23:00 PM   閱讀次數：483   評論次數：7

這幾天重寫校會網站的html和CSS。發現Firefox和Safari貌似不支援margin-top和margin-bottom，奇怪的是margin-left、margin-right卻都能正常顯示頁邊空白。調試了很久，突然想起之前有位師兄貌似有對我提起過這件事，遂神至心靈，換用了padding，在Firefox和Safari上測試了一下，完美呈現。高興之餘，不忘又開啟了IETester，用IE6測試了一下，發現邊距神奇地變成了我所設定值的兩倍有餘，原因到底是什麼，到現在還沒弄清（如有高手知道內情，還請賜教）。思考良久，甚至覺得會不會是IETester的問題，如果換在真正的IE6上或許不會有這結果，可惜我裝的是IE8，想在真正的IE6上測試，還是挺麻煩的，遂準備放棄。無意又開啟了360安全瀏覽器，試了試，也發現了這問題。於是決定無論如何必須解決。

在網上盲目地搜尋索引鍵“Firefox css標記”（因為這個問題最早是在Firefox上發現的，所以依照逐個消滅的戰略，我決定先從Firefox上下手），看了幾條，居然找到了CSS Hack，看來真是老天眷顧。認真看了看，發現我之前準備各個擊破的戰略很有先見之明，因為這顯然是標準 CSS沒辦法相容各瀏覽器顯示效果的結果，這樣子只能用CSS Hack(專屬標記)來補救了。

因為使用margin-top標記的話，IE6和360安全瀏覽器都能正常顯示，所以原有css標記還是採用margin-top，而針對Firefox和Safari，使用CSS Hack來解決問題，CSS代碼是這麼寫的：

.right_pic {

 margin-top:10px;

}

@-moz-document url-prefix() {

.right_pic {

 padding-top:10px;

}

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

 .right_pic {

 padding-top:10px;

}

}

其中right_pic是我需要使用的那個div的表示符。寫完在Firefox和Safari上是測試了一下，完美呈現。（加記：寫到這裡發生了一件相當搞笑的事：突然想起我還沒有安裝Safari，那麼前文怎麼會有一個Safari呢？太詭異了！！忙查看了一下，搞笑的事發生了，原來我一直把我的Google瀏覽器(Google Chrome)當成了Safari，真是荒唐。然而這件荒唐的事卻無意中給了我一個認識，原來Safari的CSS Hack（@media screen and (-webkit-min-device-pixel-ratio:0)）同樣適用於Google
Chrome，這也就是我到現在才發現我把Safari和chore搞混了的原因。但這是不是表示Google Chrome和Safari有相似的核心呢？我不知道，哈哈……）

OK，加記完搞笑的那件事，繼續本文，話說我發現CSS Hack確實能使邊距呈現正常，內心激動莫名，開啟360安全瀏覽器和IETester在IE6下測試也均正常，更加欣喜……突然又想起了我還有一個IE8，出於不知什麼原因（或許IE8生來就讓人討厭）這個瀏覽器一直出於冷宮狀態，平時我幾乎是不會用的。當然，為了測試頁面，還是要用的，於是開啟，同樣的問題出現在了這個瀏覽器呈現的頁面上，仔細又搜了搜，知道其實IE8的CSS Hack還是比較好寫的，比如：

html > body .right_pic {

padding-top:10px;

}

試了試，ok，搞定！帶著勝利者的心情審視了一下我的勞動結果，從Firefox、Google Chrome、IE6、IE8（IE7在我的IETester上莫名其妙地不能用，鬱悶，希望它呈現的和IE8相差無幾才好）都正常，最後開啟360安全瀏覽器，本來的問題又出現了，邊距是設定值的兩倍……

在鬱悶中思考了一下，覺得應該是360安全瀏覽器即相容了IE6的核心，又相容IE8的核心，所以html > body .right_pic在360安全瀏覽器上也有效，margin 10px加上padding的10px，結果就是外觀上看起來的20px，比預期大了一倍。又在網上搜尋了一番，發現針對IE還可以這麼寫：

<!--[if IE 7]> 

<style type=""text/css""> 

</style> <![endif]-->

 <!--[if IE 6]> 

<style type=""text/css""> </style> 

<![endif]--> 

當然，IE8的話把7改成8就可以了。居然搞定了，真是太神奇了。

總結一下：搞這麼多，其實都是瀏覽器核心混亂的結果，如果Firefox、IE……不各自為政，大家坐下來談出一個協議來，那寫css就不至於這麼辛苦了，而且為了相容各瀏覽器，不得不寫出很多冗餘的代碼，這大大降低了資訊的傳遞效率而且與現時節約能源的觀念顯然是不符的。然而，反過來想了想，又覺得如果真的出一個協議來，那豈不是大家都能寫css了，網頁設計師到了那個時候是不是吃飯都困難？！或許真到了那時候，靠的就真的全是個人的美感和設計能力而不是代碼編寫能力了。

世界就是這樣，有些很顯然不適合存在於世的東西，卻又有一定的存在的道理，這個道理每每牽涉到的是部分人的利益，從而使得那部分人不去消滅它，這件不適合存在的東西也就依舊存在了……

這就是世界……真實的世界……

原文地址：http://www.tengs.info/article.asp?id=63