【正文】 CSS HACK以下兩種方法幾乎能解決現(xiàn)今所有HACK.1, !important (不是很推薦，用下面的一種感覺最安全)隨著IE7對!important的支持, !important 方法現(xiàn)在只針對IE6的HACK.(.)代碼:stylewrapper {width: 100px!important。IE7 專用*+height: 100px。IE6 專用_height: 100px。/**/下面是IE的條件注釋，個人覺得用條件注釋調用相應 Hack是比較完美的多瀏覽器兼容的解決辦法。 /*。/* */}} import 39。這些過 濾器有的是寫在CSS中通過過濾器導入特別的樣式，也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。只有Opera識別media all and (minwidth: 0px){ select {……} }針對Opera瀏覽器做單獨的設定。 }這個是在越出長度后會自行的截掉多出部分的文字，并以省略號結尾，很好的一個技術。 whitespace:nowrap。截字省略號select { otextoverflow:ellipsis。 visibility:hidden。 height:0。清除浮動select:after {content:.。}盒模型的清除方法不是通過!important來處理的。 voicefamily:inherit。只有IE5不識別盒模型解決方法selct {width:。僅IE5不識別select/*IE5不識別*/ { display:none。僅IE6與IE5不識別select/**/ { display /*IE6,IE5不識別*/:none。僅IE6不識別select { display /*IE6不識別*/:none。其它瀏覽器不識別。僅IE7識別*+html {…}當面臨需要只針對IE7做樣式的時候就可以采用這個HACK。} /*safari可見*/這里select是選擇符，根據(jù)情況更換。屏蔽IE瀏覽器（也就是IE下不顯示）*:lang(zh) select {font:12px !important。overflow:hidden。 textalign:center。 }box p {margintop: 20px。11 高度不適應高度不適應是當內層對象的高度發(fā)生變化時外層高度不能自動進行調節(jié)，特別是當內層對象使用margin 或paddign 時。解決辦法：對layout使用lineheight屬性 或者給layout使用固定高和寬。//這句是關鍵}HTML代碼DIV id=boxDIV id=left/DIVDIV id=right/DIV/DIV9 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)p[id]{}div[id]{}p[id]{}div[id]{},FF和OPera作用屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標簽中有id的都是同樣式的.10 IE捉迷藏的問題當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發(fā)生捉迷藏的問題。}right{width:50%。}left{float:left。}8 DIV浮動IE文本產生3象素的bug左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.box{float:left。clear: both。display: block。}或者加入:after（偽對象）,設置在對象后發(fā)生的內容，通常和content配合使用，IE不支持此偽對象，非Ie 瀏覽器支持，所以并不影響到IE/WIN瀏覽器。7 清除浮動.hackbox{display:table。}第一個minwidth是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規(guī)。為了讓這一命令在IE上也能用，可以把一個div 放到 body 標簽下，然后為div指定一個類：然后CSS這樣設計：container{minwidth: 600px。}6 頁面的最小寬度minwidth是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。 minwidth: 80px。}htmlbody box{ width: auto。要解決這個問題，可以這樣：box{ width: 80px。這樣問題就大了，如果只用寬度和高度，正常的 瀏覽器里這兩個值就不會變，如果只用minwidth和minheight的話，IE下面根本等于沒有設置寬度和高度。 //實現(xiàn)同一行排列的的效果 diplay:table。box{ display:block。 //使浮動忽略}這里細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素)。 margin:0 0 0 100px。//for }4 浮動ie產生的雙倍距離box{ float:left。//for ff+}box{width:600px!important//for ffwidth:600px。3 盒模型不同解釋.box{width:600px。MARGINLEFT: auto。MARGINLEFT: auto。但在mozilla中不能居中。 }說明：首先在父級元素定義TEXTALIGN: center。}center { MARGINRIGHT: auto。 } /* IE7 */那么在firefox下字體顏色顯示為333，IE6下字體顏色顯示為666，IE7下字體顏色顯示為999。 } /* Moz */* html 1 { color: 666。在IE6下，三個屬性IE6都認識，所以三個屬性都可以讀取，又因為第三個屬性覆蓋掉前2個屬性，所以IE6最終讀取的是第三個屬性。 下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性：在FF下，第3個屬性FF不認識，所以它讀的是 height:100px。 通用*height:120px。第三個HACK IE6 IE7公用*height:100px。）程序代碼第一個HACK，IE FF 所有瀏覽器 公用（其實也不算是HACK）height:100px。除了前面那片文章，《針對 firefox ie6 ie7的css樣式》中的hack方式也是很好用的。呵 呵！powered by 最近微軟發(fā)布的IE7瀏覽器的兼容性確實給一些網(wǎng)頁制作人員添加了一個沉重的負擔，雖然IE7已經走向標準化，但還是有許多和FF不同的地方，所 以需要用到IE7的HACK，有許多朋友問過IE7的HACK是什么，其實我也不知道。而HACK就是一種辦法，能讓你在一個CSS里面獨立的寫支持不同瀏覽器的樣式。 } 這樣做是為了用!important覆蓋原來的css樣式,由于:,所以對這句話不會有任何作用,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式： item:empty { background: green !important } :empty選擇器為css3的規(guī)范,盡管safari并不支持此規(guī)范,但是還是會選擇此元素,不管是否此元素存在,現(xiàn)在綠色會現(xiàn)在在除ie各版本以外的瀏覽器上。 background: red。. 新建一個css樣式如下： item { width: 200px。 } /* IE6 */ *+html example { color: 999。 example { color: 333。 /*For IE6*/ 注意順序。 /*For IE7 amp。瀏覽器多了，網(wǎng)頁兼容性更差了，疲于奔命的還是我們 ，找來了下面這篇文章： 現(xiàn)在我大 部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒 按要求顯示！下面是三個瀏覽器的兼容性收集. 第一種，是CSS HACK的方法 height:20px。 height:200px。 charset=gb2312 /style type=text/css!div { cursor:pointer。 !) toBreakWord(ff, 37)。}if( amp。+strContent。 } strTemp+=amp。10。 var strTemp=。}/stylediv id=ffaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/divscrīpt type=text/javascrīpt/* ![CDATA[ */function toBreakWord(el, intLen){ var ōbj=(el)。 wordwrap:breakword。10。minheight:200px。 這里為了照顧不認識minheight的IE6 可以這樣定義:{height:auto!important。所以有很多東西出現(xiàn)FF和IE顯示不一樣的根本原因在于它們的默認顯 示不一樣，而這個默認樣式該如何顯示我知道在w3中有沒有對應的標準來進行規(guī)定，因此對于這點也就別去怪罪IE了。 /* Style for IE */} 值得注意的是，一定要將xxxx !important 這句放置在另一句之上，上面已經提過 ,FF的默認值問題 或 許你一直在抱怨為什么要專門為IE和FF寫不同的CSS，為什么IE這樣讓人頭疼，然后一邊寫css，一邊咒罵那個可惡的M$ 準支持方面，IE并沒有我們想象的那么可惡，關鍵在于IE和FF的默認值不一樣而已，掌握了這個技巧，你會發(fā)現(xiàn)寫出兼容FF和IE的css并不是那么困 難，或許對于簡單的css，你完全可以不用”!important”這個東西了。 如果實在沒有辦法解決一些細節(jié)問題,”!important”會自動優(yōu)先解析, .tabd1{ background:url(/res/images/up/) norepeat 0px 0px !important。 //for ff+ width /**/:500px。 //for w\idth:500px。margin:28px}重復定義的話按照最后一個來執(zhí)行，所以不可以只寫margin:xx px!important。} 注意這兩個 margin的順序一定不能寫反， important這個屬性IE不能識別，但別的瀏覽器可以識別。}給定義死了,所以后 面就不會為這個頭疼了. 7. BOX模型解釋不一致問題 在FF和IE 中的BOX模型解釋不一致導致相差2px解決方法：div{margin:30px!important。}就能解決大部分問題 6. FORM標簽 這 個標簽在IE中,將會自動margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 padding,針對上面兩個問題,我的css中一般首先都使用這樣的樣式ul,form{margin:0。被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應該都遇到過這個問題,解決方法是改變CSS屬性的排列順序: LVHACode:style type=text/css!a:link {}a:visited {}a:hover {}a:active {}/style 4. 游標手指cursor cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以 ul標簽在FF中默認是有padding值的,而在IE中只有margin默認有值,所以先定義 ul{margin:0。 (a標簽)的邊框與背景 a 鏈接加邊框和背景色，需設置 d