常見瀏覽器兼容性

首先須要指出的是，在如今即將面向2017的時間裏，還在考慮ie兼容性問題的公司主要分兩種，

1.互聯網巨無霸企業，bat級別

2.政府相關部門和其餘全部業務涉及傳統行業的low逼公司（以及這些low逼公司養活的亂七八糟的外包公司）

 

本文只涉及css方面兼容性，我的建議遇到ie相關的原生js兼容性問題直接使用jquery，死磕ie的js相關問題沒有任何前途。

 

一：hello

  1.hack標識：

  ie6：_  和星號

  ie7：*

 

  2.ie6/7 不支持部分

  -- 不支持全部的css3屬性，好比border-radius，透明邊框

  -- 不支持display：table，inline-block等屬性；

  -- 濾鏡要這樣寫：filter：alpha(opacity=56);

  -- 不支持 固定定位，要用js

  -- IE6僅支持a標籤的僞類，IE7支持因此元素的僞類，可是不支持表單的focus；

二：兼容性問題列表

 

1.塊級元素浮動以後，橫向的margin會變得更大 ie6，會致使一行中的內容被擠到下一行

解決：浮動以後加上寬高，在設定浮動的塊級元素加上屬性  display：inline

2.ie6/ie7 塊級元素高度小於19px的時候，會比設置的值要大

解決：寫font-size=1px，line-height小於設置的高度，overflow：hidden來解決

3.ie雙邊距：display：inline

4.ie子級盒模型超過父級時候，父級會被撐大

解決：父級標籤overflow：hidden

解決2：父級相對定位，子級決定定位

5.ie6img於塊元素中，底邊多出空白 

解決：父級設置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;