CSS在不同瀏覽器中兼容問(wèn)題.doc

css在不同瀏覽器下顯示效果不同firefox和IE對(duì)某些css樣式的認(rèn)定有不少區(qū)別，包括： 字串8ul和ol的默認(rèn)padding值是不一樣的，在Firefox中，padding-left默認(rèn)值為40px左右，而IE中為0，一般設(shè)置ulmargin:0;padding:0;就能解決大部分問(wèn)題 對(duì)字體大小small的定義不同，F(xiàn)irefox中為13px，而IE中為16px，差別挺大，也只能設(shè)置為14px了事；(暫時(shí)沒(méi)有發(fā)現(xiàn)) 并列排列的多個(gè)元素（圖片或者鏈接）的代碼中的空格和回車會(huì)造成元素之間的間隙，而在firefox中和在IE中顯示是不一樣的，IE顯示空格（約8px）、firefox顯示空格（約4px） 對(duì)不規(guī)范代碼的兼容情況不同，IE中漏掉的關(guān)閉符號(hào)對(duì)顯示不造成影響，而firefox中就會(huì)形成錯(cuò)亂的布局，而在ie中用到的padding和margin的負(fù)值都會(huì)被firefox解析為0，易造成布局的混亂；（我覺(jué)得好像負(fù)值在firefox中也是有顯示的） firefox對(duì)于長(zhǎng)高尺寸的嚴(yán)格解析會(huì)造成與設(shè)置不匹配（超出）的圖片或表格將原設(shè)置div撐大； ！important屬性可以在除IE瀏覽器的其他瀏覽器中起作用，因此有人利用這種差別來(lái)令一個(gè)CSS兼容多種瀏覽器； 未定義id的div，在IE中會(huì)與div屬性中的其他設(shè)置有關(guān)，而在firefox中的位置會(huì)于div在文件中位置有關(guān)，緊隨前一個(gè)div出現(xiàn)（有待嘗試） 設(shè)置為float的div在ie下設(shè)置的margin會(huì)加倍的，特別是margin-left，這是ie6的一個(gè)bug。解決的方法是在這個(gè)div里面加上display:inline; 字串5 如果是動(dòng)態(tài)地添加內(nèi)容，高度最好不要定義。瀏覽器可以自動(dòng)伸縮，然而如果是靜態(tài)的內(nèi)容，高度最好定好。（似乎有時(shí)候不會(huì)自動(dòng)往下?lián)伍_(kāi)，不知道具體怎么回事） FF: div 設(shè)置 margin-left, margin-right 為 auto 時(shí)已經(jīng)居中, IE 不行。IE里設(shè)置text-align:center，就居中了，但在FF中不行。所以一般兩個(gè)都要設(shè)置。 FF: 設(shè)置 padding 后, div 會(huì)增加 height 和 width, 但 IE 不會(huì), 故需要用 !important 多設(shè)一個(gè) height 和 width（也沒(méi)感覺(jué)，覺(jué)得設(shè)了padding，大家的高寬都變了） 在FF中可以實(shí)現(xiàn)的div 垂直居中問(wèn)題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行。這種方法在IE中實(shí)現(xiàn)不了。（已試過(guò)！有用） FF: 鏈接加邊框和背景色，需設(shè)置 display: block, 同時(shí)設(shè)置 float: left 保證不換行。 在浮動(dòng)（float）的div后加clear屬性，這可以解決背景的自適應(yīng)高度問(wèn)題。怎么加才能讓不同瀏覽器都好使？IE中有默認(rèn)行高，這是要解決的問(wèn)題。 FF中不支持文字的自動(dòng)轉(zhuǎn)行；什么word-wrap:break-word;word-break:break-all都是IE搞的鬼，根本就不符合css標(biāo)準(zhǔn)。（現(xiàn)在看到的解決辦法都是通過(guò)編程實(shí)現(xiàn)） 字串3 2.css解決不同瀏覽器的兼容問(wèn)題的方法 （不是我們需要的方法，我們要達(dá)到的要求是盡量不寫!important也能解決） 字串2 解決這種問(wèn)題可以通過(guò)規(guī)范css代碼，使其符合兩種規(guī)范的標(biāo)準(zhǔn)樣式，也可以在差別處利用！important對(duì)firefox設(shè)置屬性，或者針對(duì)多種瀏覽器分別各自配置合適的CSS文件，再通過(guò)判斷瀏覽器選擇不同CSS實(shí)現(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)高度問(wèn)題 字串4 對(duì)于背景不能自動(dòng)延伸的原因上面說(shuō)的很清楚，解決方法是多嵌套一個(gè)層,這個(gè)層設(shè)置浮動(dòng)，并承擔(dān)背景，就ok了。 下面就簡(jiǎn)單示意一下 字串7字串1 本行代碼就是讓背景顏色自動(dòng)延續(xù) 字串7 字串6字串1可以這么理解：float使得層自動(dòng)獲得寬和高 字串3 但是有了第三種方法，這種方法好像并不值得推薦。 字串1 另一種方法就是給第一個(gè)div賦予屬性值：display:table；但這種方法會(huì)造成另外一些布局上的錯(cuò)誤。可以考慮使用，但不建議使用。 字串6我想這是最重要的一種方法，但是中間問(wèn)題很多。方法就是clear:both。 字串8 .clearclear:both可以使高度向下延續(xù)，但是會(huì)自動(dòng)產(chǎn)生行高； 字串8.clearclear:both;height:0在FF中清除了行高，但是IE里不認(rèn)； 字串8 .clearclear:both;height:1%在FF和IE中仍然不認(rèn)； 字串9 像之前寫的.clearclear:both;height:1%;font-size:0px;overflow:hidden在IE中好使，但在FF中卻不能讓背景顏色延續(xù)，除非加上邊框。！挺有意思，還是不太懂 字串4.clearclear:both;line-height:1px好使！我理解是清的這個(gè)容器默認(rèn)是行元素，所以高對(duì)它不起作用，所以你無(wú)論把height設(shè)置為幾都沒(méi)有效果，而line-height本