欲练CSS ，必先解决IE的一些细节分析

作为一名网站作者，想要掌握CSS，必须了解IE浏览器的一些细节分析，如何解决这些问题，才能编写兼容性更好的网页。

以下是关于解决IE细节方面问题的攻略：

了解IE的各种问题

在进行CSS编写时，IE浏览器会存在各种问题，如盒模型、浮动、定位、透明度、滤镜等问题。需要掌握IE兼容性的一些知识和解决方法，才能更好的解决这些问题。

IE6、IE7和IE8的兼容性问题

盒模型

在IE6及以下版本中，盒模型的border和padding都会包含在宽度width或高度height中，而在其它浏览器中是不包含的。解决方法可以使用标准盒模型box-sizing属性，将其设置为border-box即可。

box-sizing: border-box;
-moz-box-sizing: border-box; /*兼容Firefox*/

浮动

在IE6中，浮动元素需要设置display:inline才能解决3像素问题（也就是浮动元素和其它元素之间会出现3像素间隙的问题）。而在IE7和IE8中，则需要设置display:inline-block。

display:inline-block;
display:inline\9; /*兼容IE8*/
*display:inline; /*兼容IE6和IE7*/

定位

在IE6中，绝对定位需要对父元素设置相对定位，才能得到正确的结果。

position: relative; /*父元素*/
position: absolute;

透明度

在IE6和IE7中，透明度需要设置filter属性，而在IE8中也需要设置opacity属性。

filter: alpha(opacity=50); /*IE6和IE7*/
opacity: 0.5; /*IE8及以上版本*/

滤镜

在IE中，可以使用滤镜属性进行图像处理。一些常见的滤镜效果如下：

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3, MakeShadow=true, ShadowOpacity=0.50);
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='gray', Positive='true');

示例说明

示例一：处理盒模型问题

假设网页中有一个box元素，宽为200px，高为100px，margin为20px，padding为10px，border为5px，需要在IE6中将其显示正确。

首先需要设置盒模型box-sizing属性。

.box{
    box-sizing: border-box; /*标准盒模型*/
    -moz-box-sizing: border-box; /*兼容Firefox*/
    width: 200px;
    height: 100px;
    margin: 20px;
    padding: 10px;
    border: 5px solid #000;
}

示例二：处理浮动问题

假设网页中有一个left元素和right元素，需要在IE6和IE7中将其展示正确。

首先需要设置display为inline-block。

.left, .right{
    display: inline-block; /*标准设置*/
    display: inline\9; /*兼容IE8*/
    *display: inline; /*兼容IE6和IE7*/
    width: 100px;
    height: 100px;
}

然后需要在left元素和right元素之间加空格。

<div class="left"></div> <div class="right"></div>

以上就是欲练CSS，必先解决IE的一些细节分析的完整攻略，它们可以帮助初学者更好的理解掌握CSS知识。