IE瀏覽器兼容性問題解決方案

1、CSS常見問題

一、H5標籤兼容性

　　解決方案：<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

二、元素浮動以後，能設置寬度的話就給元素加寬度，若是須要寬度是內容撐開的，就給它裏邊的塊元素加上浮動float:left;

三、第一塊元素浮動，第二塊元素加margin-left值等於第一塊元素寬度，在IE6下會有間隙問題

　　解決方案：不要用margin-left，給兩個元素都加上浮動float:left;

四、IE6下子元素超出父級寬高，會把父級寬高撐開，好比用於放置輪播的ul寬度會超出父元素

　　解決方案：不要讓子元素的寬高超過父級

五、P包含塊元素嵌套規則

　　牢記規則：p、h標籤不能嵌套塊元素

2、CSS兼容性問題

一、margin兼容性問題

　　1）margin-top傳遞，子元素上下margin會傳遞給父級

　　阻止：觸發BFC（如overflow:hidden;拯救標準瀏覽器及IE78）、觸發IE的haslayout  zoom:1（拯救IE67）;

　　2）上下margin疊壓（觸發條件：同級元素，第一個元素的下與第二個元素的上會疊壓在一塊兒）

　　解決方案：兩個元素分開設置margin，而後儘可能使用同一方向的margin，好比margin-top

二、display:inline-block; 　　塊元素變爲內聯塊， IE67不兼容；內聯元素變爲內聯塊，全部瀏覽器都支持

　　解決方案：{display:inline-block; *display:inline; *zoom:1;}

　　發現問題：固然，變爲內聯塊後，有一個特性就是若是元素換行，在頁面上元素之間就會有空隙的，空隙大小爲一個空格的像素大小。

三、IE6元素最小高度爲19px

　　解決方案：overflow:hidden;

四、IE67雙邊距，當元素浮動後，再設置margin，那麼就會產生雙倍邊距

　　解決方案：針對IE67，添加*display:inline;樣式，好比頁面上橫向排列的幾組塊，會常常遇到

五、li裏元素都浮動，在IE67下方會產生4px間隙問題

　　解決方案：針對IE67，添加*vertical-align:top;樣式

六、IE6下，兩個浮動元素之間有註釋或者內聯元素而且和父級寬度相差不超過3px，會致使多複製一些文字問題

　　解決方案：1）兩個浮動元素之間避免出現內聯元素或者註釋

　　　　　　　2）與父級寬度相差3px或以上　　

七、IE67父級元素的overflow:hidden;子元素設置position:relative後，就包不住子元素了

 　　解決方案：針對IE67，給父級元素添加position:relative;

八、IE6下絕對定位元素父級寬高是奇數，絕對定位元素的right和bottom值會有1px的誤差

 　　解決方案：避免父級寬度出現奇數

九、IE6下絕對定位元素和浮動元素並列絕對定位元素消失

 　　解決方案：浮動元素和絕對定位元素時同級的話，定位元素就會消失，只要讓它們兩個不處於同級就能夠避免這個bug了

十、IE6下input的空隙

 　　解決方案：針對IE67，給input元素添加*float:left;

十一、IE6下輸入類型表單控件背景問題，背景不固定，滾動了

　　解決方案：設置background-attachment:fixed;

十二、line-height　　在IE6七、FF下不兼容，會有幾個像素的誤差，目測只有IE8和其餘標準瀏覽器正常

　　IE6下，想給給圖片設置line-height來達到垂直居中效果是實現不了的，就給img標籤單獨設置{float:left;postion:relative;top:...}

　　固然，文本的line-height仍是識別的

1三、常見文章列表佈局：標題+發佈日期　　

　　<ul>

　　　　<li>這裏是文章列表標題，我是奇葩的IE瀏覽器<span style="float:right">2015-07-17</span></li>

　　　　<li>這裏是文章列表標題2，我是奇葩的IE瀏覽器<span style="float:right">2015-07-17</span></li>

 　　</ul>

假設你按照以上佈局，那麼恭喜你，在IE67下發布日期會掉到下一行去

　　解決方案，按以下佈局：　

　　<ul>

　　　　<li><span style="float:right">2015-07-17</span>這裏是文章列表標題，我是奇葩的IE瀏覽器</li>

　　　　<li><span style="float:right">2015-07-17</span>這裏是文章列表標題2，我是奇葩的IE瀏覽器</li>

 　　</ul>

或　

　　<ul>

　　　　<li><span style="float:left">這裏是文章列表標題，我是奇葩的IE瀏覽器</span><span style="float:right">2015-07-17</span></li>

　　　　<li><span style="float:left">這裏是文章列表標題2，我是奇葩的IE瀏覽器</span><span style="float:right">2015-07-17</span></li>

 　　</ul>

1四、遮罩彈窗

　　標準 不透明度：opacity:0~1

　　IE678濾鏡：filter:alpha(opacity=0~100);

1五、<a>的手形光標

　　標準瀏覽器下，不須要設置也有

　　IE6下沒有，就給a{cursor:pointer;}

1六、<a>的 text-decoration:none;

　　標準下，只需 a {text-decoration:none;}

　　IE6下，a {text-decoration:none;}  而且 a:hover {text-decoration:none;}

3、CSS hack

\9　　 IE67  8-10　　 例如：background:blue\9;

+*　　IE67　　　　　 例如：*background:yellow;  +background:yellow;

_　　  IE6　　　　　　例如：_background:green;

 

4、png-24兼容性問題，IE6不支持

解決方案：

　　1）引用Js插件，不能處理body以上的，最好放在頁面底部，這樣不影響頁面加載，也就是放在</body>標籤上面　　

　　　　<!--[if IE 6]>

　　　　　　<script src="DD_belatedPNG_0.0.8a.js" type="text/javascript"></script>

　　　　　　<script>

　　　　　　　　DD_belatedPNG.fix("*");

　　　　　　</script>

　　　　<![endif]-->

 

　　2）原生濾鏡，給背景圖所在的標籤加上以下樣式，好比body

　　　　body {

　　　　　　　　_background-image:none;

　　　　　　　　_filter:progid:DXImage Transform.Microsoft.AlphaImageLoader(src="XX.png",sizingMethod="crop");

　　　　　　　}