WordPress:CSS Fixing Browser Bugs

css在不同瀏覽器下顯示效果不同 firefox和IE對某些css樣式的認(rèn)定有不少區(qū)別，包括：

ul和ol的默認(rèn)padding值是不一樣的，在Firefox中，padding-left默認(rèn)值為40px左右，而IE中為0，一般設(shè)置ul{margin:0;padding:0;}就能解決大部分問題對字體大小small的定義不同，F(xiàn)irefox中為13px，而IE中為16px，差別挺大，也只能設(shè)置為14px了事；(暫時沒有發(fā)現(xiàn))并列排列的多個元素（圖片或者鏈接）的代碼中的空格和回車會造成元素之間的間隙，而在firefox中和在IE中顯示是不一樣的，IE顯示空格（約8px）、firefox顯示空格（約4px）對不規(guī)范代碼的兼容情況不同，IE中漏掉的關(guān)閉符號對顯示不造成影響，而firefox中就會形成錯亂的布局，而在ie中用到的padding和margin的負(fù)值都會被firefox解析為0，易造成布局的混亂；（我覺得好像負(fù)值在firefox中也是有顯示的）firefox對于長高尺寸的嚴(yán)格解析會造成與設(shè)置不匹配（超出）的圖片或表格將原設(shè)置div撐大！important屬性可以在除IE瀏覽器的其他瀏覽器中起作用，因此有人利用這種差別來令一個CSS兼容多種瀏覽器；未定義id的div，在IE中會與div屬性中的其他設(shè)置有關(guān)，而在firefox中的位置會于div在文件中位置有關(guān)，緊隨前一個div出現(xiàn)設(shè)置為float的div在ie下設(shè)置的margin會加倍的，特別是margin-left，這是ie6的一個bug。解決的方法是在這個div里面加上display:inline;如果是動態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。（似乎有時候不會自動往下?lián)伍_，不知道具體怎么回事）FF: div 設(shè)置 margin-left, margin-right 為 auto 時已經(jīng)居中, IE 不行。IE里設(shè)置text-align:center，就居中了，但在FF中不行。所以一般兩個都要設(shè)置。FF: 設(shè)置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設(shè)一個 height 和 width（也沒感覺，覺得設(shè)了padding，大家的高寬都變了）在FF中可以實(shí)現(xiàn)的div 垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行。這種方法在IE中實(shí)現(xiàn)不了。（已試過！有用）FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時設(shè)置 float: left 保證不換行在浮動（float）的div后加clear屬性，這可以解決背景的自適應(yīng)高度問題。怎么加才能讓不同瀏覽器都好使？IE中有默認(rèn)行高，這是要解決的問題。FF中不支持文字的自動轉(zhuǎn)行；什么word-wrap:break-word;word-break:break-all都是IE搞的鬼，根本就不符合css標(biāo)準(zhǔn)。（現(xiàn)在看到的解決辦法都是通過編程實(shí)現(xiàn)）

2.css解決不同瀏覽器的兼容問題的方法 （不是我們需要的方法，我們要達(dá)到的要求是盡量不寫!important也能解決）

解決這種問題可以通過規(guī)范css代碼，使其符合兩種規(guī)范的標(biāo)準(zhǔn)樣式，也可以在差別處利用！important對firefox設(shè)置屬性，或者針 對多種瀏覽器分別各自配置合適的CSS文件，再通過判斷瀏覽器選擇不同CSS實(shí)現(xiàn)兼容性。 代碼如下：

1. example { color: #333; } /* FF*/

• html #example { color: #666; } /* IE6 */
• +html #example { color: #999; } /* IE7 */

這樣在IE6中顯示字體顏色是#666；在IE7中顯示的字體顏色是#999；在FF中顯示的顏色是#333

3.FF解決背景的自適應(yīng)高度問題

對于背景不能自動延伸的原因上面說的很清楚，解決方法是多嵌套一個層,這個層設(shè)置浮動，并承擔(dān)背景，就ok了。 下面就簡單示意一下

本行代碼就是讓背景顏色自動延續(xù)

可以這么理解：float使得層自動獲得寬和高

但是有了第三種方法，這種方法好像并不值得推薦。另一種方法就是給第一個div賦予屬性值：display:table；但這種方法會造成另外一些布局上的錯誤?？梢钥紤]使用，但不建議使用。我想這是最重要的一種方法，但是中間問題很多。方法就是clear:both。

.clear{clear:both}可以使高度向下延續(xù)，但是會自動產(chǎn)生行高；

.clear{clear:both;height:0}在FF中清除了行高，但是IE里不認(rèn)；

.clear{clear:both;height:1%}在FF和IE中仍然不認(rèn)；

像之前寫的.clear{clear:both;height:1%;font-size:0px;overflow:hidden}在IE中好使，但在FF中卻不能讓背景顏色延續(xù)，除非加上邊框。！挺有意思，還是不太懂

.clear{clear:both;line-height:1px}好使！我理解是清的這個容器默認(rèn)是行元素，所以高對它不起作用，所以你無論把height設(shè)置為幾都沒有效果，而line-height本身就是作用于行元素的，所以好使！

上面理解的不對!重新理解是：IE里面有默認(rèn)的行高，必須把行高給清掉，可以用font-size:0px或line-height:0px；但是這里又有一個問題，就是height的值不要用百分?jǐn)?shù)，沒有用！