浏览器CSS兼容问题汇总及解决_html/css_WEB-ITnose

 
问题解决：在其中一个非文字的对象的样式中增加margin: (容器的line-height - 对象本身的高度)/2px 0; 和 vertical-align:middle;
  
7.IE6下，hover失效
 
问题描述：IE6下，hover只对a标签有效
 
问题解决：用JS代码解决
  
8.IE6不兼容position:fixed;
 
问题描述：IE6不支持position:fixed;
 
问题解决：1.用JS代码解决
 
　　　　　 2.用css expression解决（备注：由于css expression极其影响性能，一般情况下不推荐使用），代码如下：
 
  
/* IE6 头部固定定位 */.fixed-top{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}/* IE6 右侧固定定位 */.fixed-right{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)||0)-(parseInt(this.currentStyle.marginRight, 10)||0));}/* IE6 底部固定定位 */.fixed-bottom{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||0)-(parseInt(this.currentStyle.marginBottom, 10)||0)));}/* IE6 左侧固定定位 */.fixed-left{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
 
 
　　　　这之中可能会出现抖动的情况，所以还需加入
 
  
/* 修正IE6抖动bug */_body{background-image:url(about:blank);background-attachment:fixed;}
 
  
9.IE6浮动时会出现双倍margin的bug
 
问题描述：IE6用float浮动时会出现双倍margin的bug
 
问题解决：设置属性display:inline;
  
10.当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG
 
问题描述：在IE6、7中，当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG
 
问题解决：设置属性vertical-align:top;
  
11.IE6下的文本溢出BUG
 
问题描述：如下代码，在IE6下，文本内容会溢出，多出一个“了”，并且注释条数越多，溢出的内容也会随之增多
 
  
.test{zoom:1;overflow:hidden;width:500px;}.box1{float:left;width:100px;}.box2{float:right;width:400px;}   我就要溢出来了
 
  
问题解决：方法1：删掉box1和box2之间的所有注释
 
　　　　　方法2：取消box1和box2的浮动
  
后话：除了IE6、7一些自身的bug，更多兼容性问题来自于浏览器本身对一些CSS新属性、选择器或者一些新特性的不支持或者不完全支持，所以，如果项目需要支持低版本浏览器时，请确认所使用CSS特性的浏览器支持程度，推荐登录http://caniuse.com/进行检测。　　　 




声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:0731-84117792 E-MAIL:11247931@qq.com