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

　　对于前端开发者来说，世界上存在着一个神奇的东西——IE浏览器，尤为是低版本的IE浏览器，惨不忍睹的兼容性使其臭名昭著。前端工做者不少的时间都花在了和它打交道上，因此你们纷纷吐槽IE浏览器如何的渣，简直是万恶之源。可是IE浏览器市场份额有很是大，喷完还要接着搞兼容。对于IE浏览器来说，咱们应该有一个客观的评价。首先其兼容性差，缘由可想而知，更新速度太慢，要几年才出一个版本，而市场上的FireFox、chrome等浏览器几个月就有一个版本上市。中间那么长的时间足以将其bug充分的暴露出来，其余浏览器就没有bug？固然不是！只是其余浏览器更新周期短，bug暴露机会小，并且修复速度快罢了。如今市场上的IE浏览器主要有IE六、IE七、IE八、IE九、IE十、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，多是微软给脸上抹点白。

---

 

1、IE的不支持部分

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

二、IE6 border 不支持transparent ;

三、IE6仅支持a标签的伪类，IE7支持因此元素的伪类，可是不支持表单的focus；

四、IE六、7不支持display：table，inline-block等属性；

五、IE六、IE7不支持min-width, min-height, max-width, max-height；

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

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

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

九、IE六、七、8实现透明效果只能经过滤镜；

尽可能遵照元素嵌套规范，好比不要用p标签包h标签。

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

---

 

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

一、IE6双边距bug：

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

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

二、IE6的子元素能够撑开父元素：

解决办法：进行精确的计算父子级关系。固然能够经过overflow：hidden将超出的子元素隐藏掉。

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

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

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

五、IE六、7下几px的间隙问题：

    li自己没有浮动，可是内容的浮动让li多出来几px的间隙。

解决办法：

    一、给li加浮动，

    二、给li加vertical-align：top/middle/bottom  也能够用来清除图片下的间隙

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

六、IE6最小高度问题：

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

解决办法：

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

     二、overflow：hidden；

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

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

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

无法解决。

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

其余浏览器能够用overflow：hidden；

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

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

解决办法同上。

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

目前没办法解决。

十二、IE6：当li间隙问题和IE6最小间隙同时存在时(li自己没浮动，可是其中内容有浮动致使其下面有间隙：给li加vertical-align属性）

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

1三、IE6文字溢出bug：

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

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

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

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

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

没有解决办法。

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

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

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

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

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

---

3、hack

hack是一种解决兼容性很好的办法，可是如今开发不怎么同意使用，注意尽可能少使用吧！

一、条件注释法（通常使用在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]-->

二、属性前缀法：

标准模式下：

#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生效 */
}

 三、选择器前缀法：

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

 

注意：

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

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

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

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

---

 

4、杂碎

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

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

 

二、模拟固定定位：

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