ie6下CSS样式失效时如何进行调试

 1）首先要确定是哪个样式名出了问题。
     可以通过ie8下的F12功能或FF的fireBug或其它的辅助工具来准确定位到正常显示模式下的样式名。也可通过更改样式名或ID名来检验是否是当前的样式出现了异常。

2）按CSS HACK规则来写一个专门针对IE6下的此样式。
     A)对于#开头的样式或直接在下面复制一个当前的同名样式，并在前面加上IE6的特殊标志*html.
     如：#footer{width:200px;color:#ff0000;}        /* for FF, IE8 */
            *html #footer{width:200px;color:#ff9900;}      /* for IE6 */
           *+html #footer{width:200px;color:#ff9900;}      /* for IE7   */
            /*请注意上面的书写顺序，FF->IE6->IE7,若ie7下样式正常可不用写最后一行*/
   B)对于. 开头的样式可直接在样式的{}内重写样式。
      如：.footer{width:200px;color:#ff0000;}
             .footer{width:200px;                  /* for FF, IE8*/
                           *width:250px;                 /* IE7支持 */
                          _width:320px;               /* IE6支持 */
                          color:#ff0000;               /* for FF,IE8 */
                         *color:purple;                 /* IE7支持 */
                          _color:brown;               /* IE6支持 */
                         }

3）再次调试，多数情况下样式已经正常了。不过，有时上面会有一些样式的影响力渗透到当前的样式上，直接把当前的样式给覆盖掉。这样就要加上一句clear:both;

4）可能是因为margin 或padding等不兼容造成的，出现此情况尝试在html的头部添加如下内容。

 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

注意：此段代码只针对ie浏览器有效！

5）浮动ie产生的双倍距离

#box{

float:left;

width:100px;

margin:0 0 0 100px; //这种情况之下ie会产生200px的距离

display:inline; //使浮动忽略

}

这里细说一下block,inline两个元素,block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

#box{

display:block; //可以为内嵌元素模拟为块元素

display:inline; //实现同一行排列的的效果

display:table;//将对象作为块元素级的表格显示

}