常用的CSS Hack技術集錦,瀏覽器核心
絕大多數的IE bug是因為haslayout http://dwz.cn/4Elg7X
而haslayout是ie6~ie7的屬性，ie8已經廢棄。
幾個有用的連結:
CSS Hack Table https://swordair.com/tools/css-hack-table/
最全的CSS hack方式一覽 http://blog.csdn.net/freshlover/article/details/12132801
常用的CSS Hack技術集錦 http://www.open-open.com/lib/view/open1412995165092.html
移動端1px細線解決方案 http://www.cnblogs.com/lunarorbitx/p/5287309.html
ie bug集合 http://www.w3cplus.com/solution/iebug/iebug.html
ie6,7,8 bug集合 http://www.cnblogs.com/orez88/articles/2563650.html
http://www.wufangbo.com/ie6-ie7-ie8-css-bug/
1.IE支援大部分特殊字元 ，firefox,chrome,opera,safari不支援 (opera可識別除外)。
2. \9 ：所有IE瀏覽器都支援
3. _和- ：僅IE6支援
4. * ：IE6、E7支援
5. \0 ：IE8、IE9支援，opera部分支援
6. \9\0 ：IE8部分支援、IE9支援
7. \0\9 ：IE8、IE9支援
下面的總結來自 CSS Hack大全&詳解
各種CSS hack情況介紹
1.區別IE和非IE瀏覽器
2.區別IE6,IE7,IE8,FF
3.區別IE6、IE7、Firefox(方法1,方法2)
4.區別IE7、Firefox
5.區別IE6、IE7(方法1,方法2)
6.區別IE6、Firefox
CSS Hack常見的有三種形式：(總結來自:常用的CSS Hack技術集錦 )
CSS屬性Hack、CSS選擇符Hack以及IE條件註釋Hack， Hack主要針對IE瀏覽器。
1、屬性級Hack：比如IE6能識別下劃線”_”和星號” * “，IE7能識別星號” * “，但不能識別下劃線”_”，而firefox兩個都不能認識。
2、選擇符級Hack：比如IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
3、IE條件註釋Hack：IE條件註釋是微軟從IE5開始就提供的一種非標準邏輯語句。比如針對所有IE：<!–[if IE]><!–您的程式碼–><![endif]–>，針對IE7以下版本：<!–[if lt IE 7]><!–您的程式碼–><![endif]–>，這類Hack不僅對CSS生效，對寫在判斷語句裡面的所有程式碼都 會生效。
PS：條件註釋只有在IE瀏覽器下才能執行，這個程式碼在非IE瀏覽下被當做註釋視而不見。可以通過IE條件註釋載入不同的CSS、JS、HTML和伺服器程式碼等。
BFC的規則:
-
內部的Box會在垂直方向，一個接一個地放置。
-
Box垂直方向的距離由
margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊 -
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
-
BFC的區域不會與float box重疊。
-
BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
-
計算BFC的高度時，浮動元素也參與計算
由於 CSS Hack,瀏覽器核心,相容 產生的面試題
什麼是BFC http://www.cnblogs.com/leejersey/p/3991400.html
什麼是BFC http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
什麼是BFC https://segmentfault.com/a/1190000004621361 (說的比較細緻)
什麼是BFC http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
使用display:inline-block在IE6中不能正常顯示,如何解決?
CSS魔法堂：hasLayout原來是這樣! http://www.cnblogs.com/fsjohnhuang/p/5291166.html ( BFC,IFC )
CSS魔法堂：重新認識Box Model、IFC、BFC和Collapsing margins http://www.cnblogs.com/fsjohnhuang/p/5259121.html
方法1:直接讓塊元素設定為內聯物件呈遞(設定屬性display:inline),然後出發塊元素的layout(如zoom:1).相容瀏覽器的程式碼如下:
div{display:inline-block;*display:inline,*zoom:1;...}
方法2: 先使用display:inline-block屬性觸發塊元素,然後在定義display:inline,讓
塊元素呈遞為內聯物件(兩個display要先後放在兩個CSS樣式宣告中才有效果,這是IE的一
個經典bug,如果先定義了display:inline-block,然後在將display設回inline,layout不會消失)
程式碼如下:
div{display:inline-block;...} div{*display:inline}
ie6中為什麼不能設定1px高的div?
答: 在用DIV構建網頁的時候,有時候需要的高度很小,這時候就可能會出現問題,因為,IE6下DIV有個預設的高度,大約是10-12px,當你試圖定義一個高度小於 這個預設值的div的時候,IE會固執的認為這個層的高度不應該小於 字型的行高.
解決辦法:
方法1:定義該div字型大小
<div style="height:1px;font-size:0;"></div>
方法2:直接限制自動調整
<div style="height:1px;overflow:hidden;"></div>
IE6雙倍邊距 IE6瀏覽器會出現雙倍邊距解決方法?
所謂的IE6雙倍邊距就是指當元素有float屬性，又有margin屬性時，在IE6下面顯示的margin的值是設定值的兩倍,這個問題從有css技術時就已經誕生.
<div style="width:200px;height:50px;background:#ccc;">
<div style="width:100px; height:50px;float:left;margin-left:10px; background:#eee;"></div>
</div>
程式碼如下:
<div style="width:200px;height:50px;background:#ccc;">
<div style="width:100px; height:50px;
float:left;margin-left:10px;
background:#eee; display:inline"></div>
</div>
第二種辦法:
採用CSS Hack:
margin-left:20px;
_margin-left:20px;
IE6中png問題?
答: 8種解決方案 http://18sucai.com/article/338.htm
3種解決方案: http://www.cnblogs.com/yuzhongwusan/archive/2009/04/17/1438119.html
PNG相容IE6解決方法 http://www.cnblogs.com/amy-1205/p/5796635.html
CSS常見相容問題解決方案?
http://www.jb51.net/css/97298.html
http://www.tuicool.com/articles/reiYR3m
http://blog.csdn.net/lysunnyrain/article/details/50962520
經常遇到的瀏覽器相容有哪些?原因,解決辦法是什麼?常用的Hack技巧?
(1)png24位的圖片在ie6瀏覽器上出現背景,解決方案就是做成png8
(2)瀏覽器預設的margin和padding不同,解決方案是加一個全域性的*{margin:0;padding:0;}
(3)ie6雙邊距bug:塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大;
(4)ie下,可以使用獲取常規屬性的方法來獲自定屬性,也可以使用getAttribute()來獲取自定義屬性;FF下,只能使用getAttribute()獲取自定義屬性;解決方法:統一通過getAttribute來獲取自定義屬性
(5)IE下,event物件有x,y屬性,但是沒有pageX,pageY屬性;
FF下,event物件有pageX,pageY屬性,但是沒有x,y屬性
解決方法:(條件註釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數
(6)Chrome中文介面下預設會將小於12px的文字強制按照12px顯示,可通過加入css屬性-webkit-text-size-adjust: none;來解決
淺談一下怎麼處理瀏覽器相容性問題?
答: 合理化HTML結構,簡潔化CSS屬性: html結構合理規範了,很大程度上避免了相容性問題,css要儘量寫的簡單有效,特效用JavaScript的來做,很多時候別用css偽類實現,針對 比較特殊的用CSS Hack處理.
<!DOCTYPE html>
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<![endif]-->
<!--[if IE 7]>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<![endif]-->
<!--[if IE 6]>
<meta http-equiv="X-UA-Compatible" content="IE=6" />
<![endif]-->
<!DOCTYPE html>是HTML5的宣告，主流的遊覽器中只有IE8及以下版本不支援，
這樣IE會進入Quirks模式。但之後的宣告可以強制指定IE的呈現模式，
所以<!DOCTYPE html>宣告對IE就無影響