[分享]css兼容各种ie浏览器

在Web开发中，如果你有使用过CSS，那么你一定会遇到IE浏览器的兼容性问题。IE浏览器们对CSS的支持程度非常不同，有很多CSS属性和值在IE浏览器里面会出现诸如错位、不生效等问题。当然，这些问题在...

在Web开发中，如果你有使用过CSS，那么你一定会遇到IE浏览器的兼容性问题。IE浏览器们对CSS的支持程度非常不同，有很多CSS属性和值在IE浏览器里面会出现诸如错位、不生效等问题。当然，这些问题在现代浏览器里面不会再出现。

为了解决IE浏览器的兼容性问题，我们可以采取以下措施：

/* 
   兼容IE6、IE7、IE8浏览器的透明度设置
   IE6使用的是AlphaImageLoader滤镜来实现透明度，IE7、IE8支持opacity属性
*/
opacity:0.5; 
filter:alpha(opacity=50); 

我们可以看到上面的代码中，使用了CSS的 opacity 属性，这个属性可以控制透明度。但是IE6不支持这个属性，需要通过设置AlphaImageLoader透明滤镜来实现。所以我们需要同时使用 opacity 和 filter 的方式来控制透明度，才能让这个样式在IE6、IE7、IE8中都生效。

/* 
   兼容IE6、IE7浏览器的透明PNG图片显示
   IE6不支持透明PNG图片，需要使用CSS Hack实现
*/
background-image: url(images/transparent.png);
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
   enabled=true, sizingMethod=scale, src='images/transparent.png'
); 

当我们在IE6、IE7浏览器中使用透明PNG图片时，会出现图片背景不透明的问题，这时我们就需要使用CSS Hack实现。具体方法是在 IE6、IE7 里面，通过 _filter 属性来加载一张背景图，并使用 AlphaImageLoader 滤镜来实现透明效果。

这些仅仅是两个最常见的CSS兼容问题，实际上在开发过程中可能还会有很多其它的兼容问题出现。当你在书写CSS样式时，最好提供两个版本，一个用于现代浏览器，一个用于IE浏览器。或者，你可以考虑使用一些框架或库，如Bootstrap、Normalize.css等，这些库已经解决了大部分兼容问题，可以帮你大大减少工作量。