各種浏覽器CSS hack方法與技巧收集

 我最近在網上收集了一些css的hack方法和技巧，希望對大家有用~~~

各種浏覽器CSS hack方法

on May 10, 2007 at 4:39 am by 阿辛

   現在浏覽器多了，做web頁面還是比較痛苦的，當然，如果你不在乎自己做的頁面在有些浏覽器上面慘不忍睹那也是種不錯的心态(至少少了點頭痛的機會)，可是你老闆或者上司或者你的使用者同意嗎？-__!

        下面我就介紹我知道的hack方法吧。我現在比較常用的，并且感覺用的不動腦子的方法是：

1. #yourId/.yourClass {}
2. * html #yourId/.yourClass {}
3. *+html #yourId/.yourClass {}
4. @media all and (min-width:0px){
5. #yourId/.yourClass { }
6. }

    用法：直接寫CSS，用firefox作為第一浏覽器看效果，然後IE6下不一樣，就用* HTML重寫那個ID容器或者類；如果IE 7不一樣，就用*+HTML重寫，如果opera下面不一樣，就用@media那個，當然這寫重寫的需要放在原來的後面。呵呵，就這麼簡單。這個方法用了之後可能會上瘾，可是會有諸如增加CSS檔案容量等不爽，甚至有時候還會出現直接用這個寫幾段不同的。是以還是建議能熟悉了解個浏覽器具體是在什麼屬性上支援不一樣(例如border寬度IE6認為是不能算在width裡面的，但是firefox是認為算width一起的)，先盡力寫幾個浏覽器通用的CSS，不到必不得已不用這個hack方法。

原理：firefox認為是CSS文法錯誤，是以忽略。但是不同IE版本識别不同，不忽略，是以能實作hack，并且*+HTML還能通過W3C驗證，呵呵，爽吧。opera那個就不多說了，也是類似原理，但是看起來比較崩潰，要說明的是，firefox下沒問題的話，opera基本也沒什麼問題的，是以不太會用到這個hack。

還需要其他浏覽器hack方法？抱歉，我就知道這麼多，因為我電腦上隻有這麼幾個浏覽器，呵呵，公司要求或者我自己想要把握的使用者群夠了。

         ————————————-

    另外就是!important這個方法了(firefox遇到這個優先級就最高，但是IE6不認，是以下面重新定義可以覆寫)，不過這個貌似是以前甚至現在都很多人在用的，但是我個人感覺不是很爽，不能像上面的那樣明确的搞定某個浏覽器。比如現在IE7對規範CSS支援已經比IE6好了不知道多少，但是還是會有和firefox有的差異，是以用important的方式，控制起來并不像上面的那麼一目了然。

IE6.0,ie7.0與Firefox的CSS相容性問題

1.DOCTYPE 影響 CSS 處理

　　2.FF: div 設定 margin-left, margin-right 為 auto 時已經居中, IE 不行

　　3.FF: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可居中

　　4.FF: 設定 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width

　　5.FF: 支援 !important, IE 則忽略,可用 !important 為 FF 特别設定樣式，值得注意的是，一定要将xxxx !important 這句放置在另一句之上

　　6.div 的垂直居中問題: vertical-align:middle; 将行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字，就垂直居中了。缺點是要控制内容不要換行

　　7.cursor: pointer 可以同時在 IE FF 中顯示遊标手指狀， hand 僅 IE 可以

　   8.FF: 連結加邊框和背景色，需設定 display: block, 同時設定 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設定高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。

　　9.在mozilla firefox和IE中的BOX模型解釋不一緻導緻相差2px解決方法：div{margin:30px!important;margin:28px;}

　　注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識别，但别的浏覽器可以識别。是以在IE下其實解釋成這樣：div{maring:30px;margin:28px}

　　重複定義的話按照最後一個來執行，是以不可以隻寫margin:XXpx!important;

　　10.IE5 和IE6的BOX解釋不一緻

　　IE5下div{width:300px;margin:0 10px 0 10px;}

　　div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他浏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改div{width:300px!important;width :340px;margin:0 10px 0 10px}

　　關于這個是什麼我也不太明白，隻知道IE5和firefox都支援但IE6不支援，如果有人了解的話，請告訴我一聲，謝了！：）

　　11.ul标簽在Mozilla中預設是有padding值的,而在IE中隻有margin有值是以先定義ul{margin:0;padding:0;}

　　就能解決大部分問題

     注意事項：

　　1、float的div一定要閉合。

　　例如：(其中floatA、floatB的屬性已經設定為float:left;)<#div id=\\"floatA\\" >

<#div id=\\"floatB\\" >

<#div id=\\"NOTfloatC\\" >

　　這裡的NOTfloatC并不希望繼續平移，而是希望往下排。

　　這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC并非float标簽，必須将float标簽閉合。

　　在<#div class=\\"floatB\\">

<#div class=\\"NOTfloatC\\">

　　之間加上<#div class=\\"clear\\">

　　這個div一定要注意聲明位置，一定要放在最恰當的地方，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會産生異常。

　　并且将clear這種樣式定義為為如下即可：.clear{

clear:both;}

　　此外，為了讓高度能自動适應，要在wrapper裡面加上overflow:hidden;

　　當包含float的box的時候，高度自動适應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了相容。

　　例如某一個wrapper如下定義：.colwrapper{

overflow:hidden;

zoom:1;

margin:5px auto;}

　　2、margin加倍的問題。

　　設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。

　　解決方案是在這個div裡面加上display:inline;

例如：

<#div id=\\"imfloat\\">

　　相應的css為

#IamFloat{

float:left;

margin:5px;

display:inline;}

3、關于容器的包涵關系

　　很多時候，尤其是容器内有平行布局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被内層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。

　　4、關于高度的問題

　　如果是動态地添加内容，高度最好不要定義。浏覽器可以自動伸縮，然而如果是靜态的内容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎麼回事）

　　5、最狠的手段 - !important;

　　如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對于"!important"會自動優先解析,然而IE則會忽略.如下.tabd1{

background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important;

background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; }

　　值得注意的是，一定要将xxxx !important 這句放置在另一句之上，上面已經提過

      IE7.0出來了，對CSS的支援又有新問題。浏覽器多了，網頁相容性更差了，疲于奔命的還是我們，為解決IE7.0的相容問題，找來了下面這篇文章：

現在我大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正确解釋，會導緻頁面沒按要求顯示！搜尋了一下，找到一個針對IE7不錯的hack方式就是使用“*+html”，現在用IE7浏覽一下，應該沒有問題了。

現在寫一個CSS可以這樣：

#example { color: #333; }

* html #example { color: #666; }

*+html #example { color: #999; }

那麼在firefox下字型顔色顯示為#333，IE6下字型顔色顯示為#666，IE7下字型顔色顯示為#999，他們都互不幹擾。我真希望那個垃圾的IE6快點退休。。。。