CSS在不同瀏覽器中兼容問題.doc

css在不同瀏覽器下顯示效果不同firefox和IE對某些css樣式的認定有不少區(qū)別，包括： 字串8ul和ol的默認padding值是不一樣的，在Firefox中，padding-left默認值為40px左右，而IE中為0，一般設(shè)置ulmargin: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的負值都會被firefox解析為0，易造成布局的混亂；（我覺得好像負值在firefox中也是有顯示的） firefox對于長高尺寸的嚴格解析會造成與設(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; 字串5 如果是動態(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中可以實現(xiàn)的div 垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內(nèi)容不要換行。這種方法在IE中實現(xiàn)不了。（已試過！有用） FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時設(shè)置 float: left 保證不換行。 在浮動（float）的div后加clear屬性，這可以解決背景的自適應(yīng)高度問題。怎么加才能讓不同瀏覽器都好使？IE中有默認行高，這是要解決的問題。 FF中不支持文字的自動轉(zhuǎn)行；什么word-wrap:break-word;word-break:break-all都是IE搞的鬼，根本就不符合css標準。（現(xiàn)在看到的解決辦法都是通過編程實現(xiàn)） 字串3 2.css解決不同瀏覽器的兼容問題的方法 （不是我們需要的方法，我們要達到的要求是盡量不寫!important也能解決） 字串2 解決這種問題可以通過規(guī)范css代碼，使其符合兩種規(guī)范的標準樣式，也可以在差別處利用！important對firefox設(shè)置屬性，或者針對多種瀏覽器分別各自配置合適的CSS文件，再通過判斷瀏覽器選擇不同CSS實現(xiàn)兼容性。 字串7代碼如下： 字串4 字串5 字串1#example color: #333; /* FF*/* html #example color: #666; /* IE6 */*+html #example color: #999; /* IE7 */ 字串7這樣在IE6中顯示字體顏色是#666；在IE7中顯示的字體顏色是#999；在FF中顯示的顏色是#333 字串3 3.FF解決背景的自適應(yīng)高度問題 字串4 對于背景不能自動延伸的原因上面說的很清楚，解決方法是多嵌套一個層,這個層設(shè)置浮動，并承擔(dān)背景，就ok了。 下面就簡單示意一下 字串7字串1 本行代碼就是讓背景顏色自動延續(xù) 字串7 字串6字串1可以這么理解：float使得層自動獲得寬和高 字串3 但是有了第三種方法，這種方法好像并不值得推薦。 字串1 另一種方法就是給第一個div賦予屬性值：display:table；但這種方法會造成另外一些布局上的錯誤?？梢钥紤]使用，但不建議使用。 字串6我想這是最重要的一種方法，但是中間問題很多。方法就是clear:both。 字串8 .clearclear:both可以使高度向下延續(xù)，但是會自動產(chǎn)生行高； 字串8.clearclear:both;height:0在FF中清除了行高，但是IE里不認； 字串8 .clearclear:both;height:1%在FF和IE中仍然不認； 字串9 像之前寫的.clearclear:both;height:1%;font-size:0px;overflow:hidden在IE中好使，但在FF中卻不能讓背景顏色延續(xù)，除非加上邊框。！挺有意思，還是不太懂 字串4.clearclear:both;line-height:1px好使！我理解是清的這個容器默認是行元素，所以高對它不起作用，所以你無論把height設(shè)置為幾都沒有效果，而line-height本