web端兼容性问题汇总（css篇）

浏览器的差异（css兼容问题集锦）

1.对于ul、ol列表缩进问题，css样式应写成ul,ol{list-style:none;margin:0;padding:0;}

其中margin对IE有效，padding对firefox有效。经验证，在IE中，仅通过margin:0;就可以去除上下左右缩进及空白、列表编号或圆点；而在firefox中，必须通过list-style:none;margin:0;padding:0;以达到相应效果。

2.css透明度问题

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。

值得注意的是：在写样式时需要两个都写以兼容各个浏览器，并且opacity:0.6;写在下面

3.margin双边距问题

在设置float的div在IE下设置margin时会产生双边距，这是IE6的一个典型bug，其解决方法是加上display:inline;

4.div浮动IE文本会产生3pxbug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距

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

其中样式为

<pre name="code" class="css">.box{width:800px;float:left;}
.left{width:50%;float:left;}
.right{width:50%;}
*html .left{margin-right:-3px;}

5.IE6下图片下方会产生间隙

解决办法是将图片设置为display:block;或者设置vertical-align:top bottom middle;

6.使文本在一行内显示，多余部分隐藏并以省略号结束

其样式为

width:200px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;

7.使文本在多行内显示，多余部分隐藏并以省略号结束

其样式为

text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

8.怎么样使一个层垂直居中于浏览器中

使用百分比绝对定位与外补丁负值方法，负值的大小为其自身宽度高度除以二

div{
				position: absolute;
				top: 50%;
				left:50%;
				margin:-100px 0 0 -100px;
				width:200px;
				height:200px;
				border:1px solid #f00;
			}

8.FF和IE（div居中问题）

在FF中使用margin-left:auto;margin-right:auto;即可使元素居中，但IE不行，IE需要设定body居中，首先在父级元素定义text-align:center;即在父级元素内的内容居中

display:block;float:left;    //保证是块元素的前提下不换行

10.万能float闭合

.clearfix:after { 
content:"."; 
display:block; 
height:0; 
clear:both; 
visibility:hidden; 
} 
.clearfix { 
display:inline-block; 
}

//:after（伪对象）,设置在对象后发生的内容，同常和content配合使用，IE不支持此伪对象，非IE浏览器支持，所以并不影响到IE/WIN浏览器

11.为什么无法定义1px左右高度的容器，IE6下这个问题应该是默认行高造成的，解决方法

overflow:hidden;  || zoom:0.08;  ||  line-height:1px;

12.FF下给div加上padding后其宽度和高度均会有所增高，但IE不会，其解决办法就是给div设定IE、FF两个宽高，在IE宽高设置时，加上IE特有想标识*

13.css HACK标记(原理有两条，即兼容性和顺序)

所有浏览器通用: height:100px;

IE6专用:_height:100px;

IE7专用:*+height:100px;

IE6、IE7共用:*height:100px;
IE7、FF公用:height:100px !important;

解决方案：在displsy:block;后面加display:inline;display:table;

相关文章：

你感兴趣的文章：

标签云：