IE浏览器常见CSS兼容性问题及解决办法

　　对于前端开发者来讲，世界上存在着一个神奇的东西——IE浏览器，尤其是低版本的IE浏览器，惨不忍睹的兼容性使其臭名昭著。前端工作者很多的时间都花在了和它打交道上，所以大家纷纷吐槽IE浏览器如何的渣，简直是万恶之源。但是IE浏览器市场份额有非常大，喷完还要接着搞兼容。对于IE浏览器来讲，我们应该有一个客观的评价。首先其兼容性差，原因可想而知，更新速度太慢，要几年才出一个版本，而市场上的FireFox、chrome等浏览器几个月就有一个版本上市。中间那么长的时间足以将其bug充分的暴露出来，其他浏览器就没有bug？当然不是！只是其他浏览器更新周期短，bug暴露机会小，而且修复速度快罢了。现在市场上的IE浏览器主要有IE6、IE7、IE8、IE9、IE10、IE11等版本，IE5.5基本在市场上消失，所以后面的兼容性问题我们不做讨论。就这几个版本，而且bug主要集中在IE6，所以我们针对他们解决就行了。而其他浏览器要是有bug就有点蛋疼了，原因是版本太多，比如Chrome,现在的版本都到30+了。另一方面就是浏览器大战的历史遗留问题，IE浏览器凭借其亲爹windows的强大实力占领了令人眼红的市场份额，似乎想主导整个浏览器市场，很多地方自以为是，不与别人一致。举个例子：Chrome浏览器开发出一个好的功能，一般FireFox、Opera、Safari就会赶紧开发出来，并且尽量与其一致，而IE的反应则是要么根本不搭理你，要么实现的时候存在偏差，或者实现完全相同的功能，但是名字一定要跟人家不一样，妄图让其他浏览器按照他的规范走，并主导别人。（以上纯属本人恶意猜测）然后呢！大家都看到了，亲爹windows不要它了。win10搭载的是Edge浏览器，呵呵哒。现在让我们步入正题，讨论一些常用的IE浏览器Bug及解决办法（资历浅薄，有不对的地方望指正）：

PS：IEtester开发者工具不支持滤镜，只要按照标准写法写即可。利用Edge的模仿各版本IE浏览器效果并不与真实版本效果一致，修复了部分的Bug，可能是微软给脸上抹点白。

---

 

一、IE的不支持部分

1、IE6不兼容点线，要是非要这个效果的话就切背景平铺唠；

2、IE6 border 不支持transparent ;

3、IE6仅支持a标签的伪类，IE7支持所以元素的伪类，但是不支持表单的focus；

4、IE6、7不支持display：table，inline-block等属性；

5、IE6、IE7不支持min-width, min-height, max-width, max-height；

6、IE6、7 滤镜要这样写：filter：alpha(opacity=56);

7、IE6不兼容固定定位，只能用JavaScript去解决；

8、IE6不支持PNG图片的透明效果；

9、IE6、7、8实现透明效果只能通过滤镜；

尽量遵守元素嵌套规范，比如不要用p标签包h标签。

若一个div中有两个span，要垂直居中则两个span都要vertical-align：Middle；

---

 

二、兼容性问题及解决办法

1、IE6双边距bug：

在IE6下，块元素有浮动和横向margin值，横向的margin会变成两倍。和margin方向有关系。

解决办法： 将块元素转成内嵌元素。display：inline；

2、IE6的子元素可以撑开父元素：

解决办法：进行精确的计算父子级关系。当然可以通过overflow：hidden将超出的子元素隐藏掉。

3、若元素浮动，则一行全浮动。否则会出现边距问题（主要是IE6）甚至奇葩问题，其他浏览器好像也有

4、如果给input加背景，那么在输入内容超过输入框长度时，背景会移动：

解决办法：把input放在div里面，让input的背景透明，并且把背景头给div。

5、IE6、7下几px的间隙问题：

    li本身没有浮动，但是内容的浮动让li多出来几px的间隙。

解决办法：

    1、给li加浮动，

    2、给li加vertical-align：top/middle/bottom  也可以用来清除图片下的间隙

图片也可以display：block；解决，但是多图片同行就不行了

6、IE6最小高度问题：

    元素高度小于19px的会被当做19px处理。

解决办法：

     1、加font-size：0;解决办法有局限

     2、overflow：hidden；

7、IE6下父级元素包不住子级的相对定位

解决办法：给父级元素定位

8、IE6下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1px的偏差。

没法解决。

9、在IE6下，解决margin传递，触发haslayout，zoom：1；

其他浏览器可以用overflow：hidden；

这其实不算IE的bug，浏览器都有这个问题，也可以通过添加上下padding或者border来解决。

10、IE6下，父元素有边框的时候，子元素的margin消失了：

解决办法同上。

11、IE6:当一行子元素宽度之和与父级相差大于3像素或者有不满行状态的时候，最后一行的margin-bottom就会消失。

目前没办法解决。

12、IE6：当li间隙问题和IE6最小间隙同时存在时(li本身没浮动，但是其中内容有浮动导致其下面有间隙：给li加vertical-align属性）

解决办法：overflow：hidden，float：xx;

13、IE6文字溢出bug：

     子元素宽度和父元素宽度相差小于3px的时候，两个浮动元素中间有注释或者内嵌元素。

解决办法：把内嵌去掉或者调整父级大小。

14、IE6 当绝对定位和浮动元素并列的时候，绝对定位元素会消失。

解决办法：自然是去掉并列关系。给定位包个div

15、IE6下，当thead、tbody、tfoot和下面的tr同时加样式，tr的样式会代替父元素的样式。

没有解决办法。

16、IE6、7下输入类型的表单控件，默认上下有1px的边距。

解决办法：让控件脱离文档流。

17、输入类型表单控件border：none；无效

解决办法：border：0，或者给input重置背景。

18、 一个div中的元素全浮动，会除掉div的margin-bottom，但是IE6不会。
    对div进行清除浮动；
19、div#footer 的上面div中的div进行百分比布局时，如果footer不设置宽度，在IE6中footer会被拉上去，
    +、设置#footer{width: 100%}；这样会出现上面的问题。上面div的margin-bottom 会消失
    +、设置#footer{clear：both；}；

---

三、hack

hack是一种解决兼容性很好的办法，但是现在开发不怎么赞成使用，注意尽量少使用吧！

1、条件注释法（一般使用在IE6-IE9）：

只在IE下生效：

<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->

只在IE6下生效：

<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->

只在IE8以下生效：

<!--[if lt IE 8]
这段文字只在IE8浏览器以下显示
<![endif]-->

只在IE6以上版本生效：

<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->

只在IE8上不生效：

<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->

非IE浏览器生效：

<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->

2、属性前缀法：

标准模式下：

#selector{
　　-color: red;    　　 /* 减号和下划线是IE6专有的hack */
　　color：blue\9;   　　/* \9 IE6-IE10都生效 */
　　color: pink\0;  　　 /* \0 IE8-IE11生效 */
　　color: green\9\0;　　/* \9\0 IE9和IE10生效 */ 
　　*color: yellow;　　  /* [.*+<>] IE6-IE7生效 */
}

 3、选择器前缀法：

*+html selector{color:blue;} 　　　/* *+html前缀只支持IE7 */

 

注意：

不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面；

IE6下在!important后面加属性，会破坏掉前面的优先级。

还有很多其他浏览器的hack，这里来不再一一介绍，很多教程，介绍一个比较清楚的 CSS Hack

http://www.duitang.com/static/csshack.html

---

 

四、杂碎

1、支持png图片透明效果：

selector{
　　background-img: url(xx.jpg);
　　_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png", sizingMethod="crop");
}

 

2、模拟固定定位：

selector{
　　position: absolute;
　　top: expression(eval(document.documentElement.scrollTop+(document.documentElement.clientHeight-this.offsetHeight)/2));
}