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的不支持部分

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

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

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

1、IE6双边距bug：

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

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

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

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

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

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

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

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

 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));
}

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

标签：

原文地址：http://www.cnblogs.com/kiscall/p/4679616.html