瀏覽器兼容性問題解決方法

1、瀏覽器兼容性問題解決方法一、HACK以下兩種方法幾乎能解決現(xiàn)今所有HACK。1, !important隨著IE7又important的支持"important方法現(xiàn)在只針對IE6的HACK.（注意寫法.記得該聲明位置需要提前.）<style>#wrapperwidth:100px!important;/*IE7+FF*/width:80px;/*IE6*/）</style>2, IE6/IE77對火狐*+html與*html是IE特有的標簽，火狐暫不支持.而*+html又為IE7特有標簽.<style>#wrapper#wrapperwidth:1

2、20px;/*火狐*/* html#wrapperwidth:80px;/*ie6fixed*/* +html#wrapperwidth:60px;/*ie7fixed,注意順序*/</style>注意：* +html對IE7的HACK必須保證HTML頂部有如下聲明：<!DOCTYPEHTMLPUBLIC"-/W3C/DTDHTML4.01Transitional/EN""/TR/html4/loose.dtd">二、萬能float閉合關于clearfloat的原理可參見HowToClearFloa

3、tsWithoutStructuralMarkup將以下代碼加入GlobalCSS中,給需要閉合的div加上class="clearfix"即可,屢試不爽.<style>/*ClearFix*/.clearfix:after(content:"."display:block;height:0;clear:both;visibility:hidden;).clearfix(display:inline-block;)/*HidefromIEMac*/.clearfixdisplay:block;/*EndhidefromIEMac*/*endo

4、fclearfix*/</style>三、其他兼容技巧1,FF下給div設置padding后會導致width和height增加，但IE不會.（可用!important解決）2,居中問題.垂直居中.將line-height設置為當前div相同的高度，再通過vertical-align:middle.（注意內容不要換行.）水平居中.margin:0auto;（當然不是萬能）3,若需給a標簽內內容加上樣式，需要設置display:block;（常見于導航標簽）4, FF和IE對BOX理解的差異導致相差2Px的還有設為float的div在ie下margin加倍等問題.5, ul標簽在FF下

5、面默認有l(wèi)ist-style和padding.最好事先聲明，以避免不必要的麻煩.（常見于導航標簽和內容列表）6,作為外部wrapper的div不要定死高度,最好還加上overflow:hidden,以達到高度自適應.7,關于手形光標,cursor:pointer,而hand只適用于IE.四、部分樣式兼容技巧1針對火狐ie6ie7的css樣式現(xiàn)在大部分都是用important來hack,對于ie6和火狐測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！找到一個針對IE7不錯的hack方式就是使用“*+html,”現(xiàn)在用IE7瀏覽一下，應該沒有問題了?，F(xiàn)在寫一

6、個CSS可以這樣：* 1color:#333;/*Moz*/* html#1color:#666;/*IE6*/* +html#1color:#999;/*IE7*/那么在火狐下字體顏色顯示為#333,IE6下字體顏色顯示為#666,IE7下字體顏色顯示為#999。2css布局中的居中問題主要的樣式定義如下：bodyTEXT-ALIGN:center;#centerMARGIN-RIGHT:auto;MARGIN-LEFT:auto;說明：首先在父級元素定義TEXT-ALIGN:center;這個的意思就是在父級元素內的內容居中；對于IE這樣設定就已經(jīng)可以了。但在mozilla中不能居中。解決

7、辦法就是在子元素定義時候設定時再加上“MARGINRIGHT:auto;MARGIN-LEFT:auto;需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV里，你可以依次拆出多個div,只要在每個拆出的div里定義MARGIN-RIGHT:auto;MARGIN-LEFT:auto;就可以了。3盒模型不同解釋#boxwidth:600px;/forie6.0-width:500px;/forff+ie6.0#boxwidth:600px!important/forffwidth:600px;/forff+ie6.0width/*/:500px;/forie6.0-4浮動i

8、e產(chǎn)生的雙倍距離#boxfloat:left;width:100px;margin:。00100px;/這種情況之下IE會產(chǎn)生200Px的距離display:inline;使浮動忽略這里細說一下block,inline兩個元素,Block元素的特點是：總是在新行上開始，高度,寬度，行高，邊距都可以控制（塊元素）;Inline元素的特點是：和其他元素在同一行上,.不可控制（內嵌元素）;#boxdisplay:block;/可以為內嵌元素模擬為塊元素display:inline;/實現(xiàn)同一行排列的的效果diplay:table;IE不認得min-這個定義，但實際上它把正常的width和height

9、當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設置寬度和高度。比如要設置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：#boxwidth:80px;height:35px;htmlbody#boxwidth:auto;height:auto;min-width:80px;min-height:35px;6頁面的最小寬度min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width

10、當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個div放到body標簽下，然后為div指定一個類：然后CSS這樣設計：#containermin-width:600px;width:expression（document.body.clientWidth600?"600px":"auto"）;第一個min-width是正常的；但第2行的width使用了Javascript,這只有IE才認得，這也會讓你的HTML文檔不太正規(guī)。它實際上通過Javascript的判斷來實現(xiàn)最小寬度。7清除浮動.hackboxdisplay:table;/將對象作為塊

11、元素級的表格顯示或者.hackboxclear:both;或者加入：after（偽對象），設置在對象后發(fā)生的內容，通常和content配合使用，IE不支持此偽對象，非Ie瀏覽器支持，所以并不影響到IE/WIN瀏覽器。這種的最麻煩的#box:aftercontent:"."display:block;height:0;clear:both;visibility:hidden;8DIV浮動IE文本產(chǎn)生3象素的bug左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.# boxfloat:left;width:800px;# leftfloat:l

12、eft;width:50%;# rightwidth:50%;# html#leftmargin-right:-3px;/這句是關鍵HTML代碼<divid="box"><divid="left"></div><divid="right"></div></div>9屬性選擇器（這個不能算是兼容，是隱藏css的一個bug）piddivid這個于IE6.0和IE6.0以下的版本都隱藏，F(xiàn)F和OPera作用。屬性選擇器和子選擇器還是有區(qū)別的，子選擇器的范圍從形式來說縮小了，屬性選擇器的范圍比較大，如pid中，所有p標簽中有id的都是同樣式的.10IE捉迷藏的問題當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發(fā)生捉迷藏的問題。有些內容顯示不出來，當鼠標選擇這個區(qū)域是發(fā)現(xiàn)內容確實在頁面。解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構盡量簡單。11高度不適應高度不適應是當內層對象的高度發(fā)生變化時外層高度不能自動進行調節(jié)，特別是當內層對象使用margin或paddign時。例：<divid="box"&