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;即在父级元素内的内容居中

9.链接a标签加上边框和背景需要添加样式

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;
14.行内属性标签，设置display:block;(除了input元素比较特殊)后采用float布局，又有横行的margin的情况，IE6间距bug

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

15.多行文本垂直居中问题（兼容IE6,7）

方法一：

<div class="middle-box">
<div class="middle-inner">
<p><span class="suc-tip">前端开发博客，专注前端开发和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<p style="display:none;"><span class="suc-tip">5年的老博客，一直致力于WEB开发</span></p>
</div>
</div>

css：

.middle-box{display: table; height: 300px; border:1px solid #ff0000; width:400px; margin:0 auto; position:relative;}
.middle-inner{display: table-cell; vertical-align:middle; *position:absolute; *top:50%; *left:50%; width:100%; text-align:center;}
.middle-inner p{position:relative; *top:-50%; *left:-50%;}

方法二：

<div class="middle-box">
<p><span class="suc-tip">前端开发博客，专注前端开发和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<i class="visible"></i>
<p style="display:none;"><span class="suc-tip">5年的老博客，一直致力于WEB开发</span></p>
</div>
css：

.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }
.middle-box p{vertical-align: middle; display: inline-block; *display: inline; *zoom: 1;}
.visible{height: 100%; vertical-align: middle; width: 0; display: inline-block;}

css透明

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

FF：opacity:0.6。

利用display:table-cell进行等高布局。

html：

<div class="list_row">
            <div class="list_cell"><img src="img/video-1.png"/></div>
            <div class="list_cell list_center"><img src="img/video-3.png"/></div>
            <div class="list_cell">奔波了一天，收到了无数的生日快乐，享受了电影见面会现场各种形式的祝福和礼物，以及场面宏大的生日快乐歌，感谢＜西风烈＞，感谢支持我的朋友们！现在机场举长寿面祝你们都永远幸福快乐！ </div>
   </div>

css样式表：（兼容IE6以上，其中margin-bottom:-100px.*padding-bottom:110px;*float:left;是为了兼容IE6/7才使用的）

.list_row{display:table-row; overflow:hidden;}
.list_cell{display:table-cell; width:30%; margin-bottom:-100px; padding:1.6%; *padding-bottom:110px; background-color:#f5f5f5; *float:left;}
.list_center{background-color:#f0f3f9;}

16、/*去掉各table cell的边距并让其边重合*/

table{

   border-collapse:collapse;

  border-spacing:0;

}

17.移动端字体设置

body{font-family:"Helvetica Neue",Helvetica.STHeiTi,sans-serif;}

18.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

Chrome 

中文界面下默认会将小于12px 的文本强制按照12px 显示,可通过加入 CSS 属性-webkit-text-size-adjust: none;解决.