[分享]css与ie浏览器的兼容问题

在开发网站时，如果没有考虑到浏览器的兼容性问题，就会出现页面在不同浏览器下显示不同的情况，其中最常见的兼容性问题莫过于CSS与IE浏览器的兼容问题。/ IE浏览器样式hack / / 兼容IE6、IE...

在开发网站时，如果没有考虑到浏览器的兼容性问题，就会出现页面在不同浏览器下显示不同的情况，其中最常见的兼容性问题莫过于CSS与IE浏览器的兼容问题。

/* IE浏览器样式hack */
/* 兼容IE6、IE7 */
*background-color: red;
/* 仅兼容IE6 */
_height: 50px;
/* 兼容IE6、IE7、IE8 */
+height: 50px;
/* 兼容IE7、IE8 */
height: 50px !important; 

首先，CSS与IE浏览器的兼容问题主要表现在以下几个方面：

• 盒子模型不同：在IE6及更早版本中，盒子模型的计算方式为width = 内容区域的宽度 + padding + border；而在标准浏览器中，盒子模型的计算方式为width = 内容区域的宽度，padding和border则会增加盒子的宽度。为了解决这一问题，可以在CSS代码中加入如下代码：

box-sizing: border-box;
-moz-box-sizing: border-box;  /*firefox*/
-webkit-box-sizing: border-box; /*safari和chrome*/ 

• png24透明背景图片在IE6中不兼容：在IE6中，png24格式的图片会出现无法显示透明背景的问题。为了解决这一问题，可以使用24位透明的gif图片或在CSS代码中加入IE6专用的hack代码：

background: transparent none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/abc.png', sizingMethod='crop');
zoom: 1; 

• 样式hack：IE浏览器中有很多的样式hack，可以通过hack的方式来解决IE浏览器中的兼容性问题。

综上所述，CSS与IE浏览器的兼容问题是开发网站时必须要考虑到的问题之一，仅仅掌握以上几种兼容性处理方法，也足以应对大部分的兼容性问题。