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;//将对象作为块元素级的表格显示

未经允许不得转载:面包頭 » ie6调CSS样式失

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址