CSS兼容问题总结整理

网页的浏览器兼容性，指网页在各种浏览器上的显示效果尽量保持一致的状态。

兼容性起因

浏览器大战

兼容性的重要性

网站做好了浏览器兼容，能够让网站在不同的浏览器下都正常显示
浏览器兼容能够抓住更多的网站访客
浏览器兼容能够给客户更好的体验

目前常见的兼容方案

IE条件注释法

1
2
3

<!--[if IE]>
	这段文字只在IE浏览器显示
<![endif]-->

类内属性前缀法

字符	示例	说明
_	_color:red;	IE6
*	*color:green;	IE6/7
\9	color:yellow\9;	IE6/IE7/IE8/IE9/IE10都生效
\0	color:blue\0;	IE8/IE9/IE10都生效
\9\0	color:purple\9\0;	只对IE9/IE10生效

浏览器前缀法

内核	主要代表的浏览器	前缀
Trident	IE浏览器	-ms
Gecko	Firefox	-moz
Presto	Opera	-o
Webkit	Chrome和Safari	-webkit

通过meta标签来控制

国内浏览器多为双核浏览器（360浏览器等），即webkit+IE，兼容起来实在费神，我们可以使用定义meta标签强制浏览器使用某种内核打开页面：

//若页面需默认用极速核，增加标签：
<meta name="renderer" content="webkit"> 
//若页面需默认用ie兼容内核，增加标签：
<meta name="renderer" content="ie-comp"> 
// 若页面需默认用ie标准内核，增加标签：
<meta name="renderer" content="ie-stand">

我在工作中遇到的部分兼容性问题

浏览器默认margin和padding各有不同
- reset.css重置全局样式
  1
  2
  3
  4
  {
  margin:0;
  padding:0;
  }
Chrome中文界面下小于12px的文本会强制按照12px显示
- 可使用CSS属性webkit-text-size-adjust
  1
  { webkit-text-size-adjust:none; }

漏写DTD声明在IE中会触发浏览器的怪异模式（FireFox中仍会按照标准模式来解析）
- 一定要加DTD声明
IE和FireFox中相邻DIV上下margin会重合，重合时按照绝对值较大的margin进行展示
- 养成固定习惯，尽量只用margin-top或者margin-bottom中的一个

透明度：

{
   opacity: 0.6 ; 
   filter: alpha(opacity=60)；
}

所有浏览器下，p标签中间加载块元素都会被分解成两个p元素
- 不要在p标签中间加块级元素
a标签在访问后，各状态的样式会混乱掉
- 4各伪类的顺序按照：L-V-H-A

渐变的兼容

使用filter滤镜（带透明度的渐变，在部分低版本浏览器上会失去透明度）

.gradient{ 
    width:300px; 
    height:150px; 
    filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=0,finishx=100,finishy=0) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#483F96,endcolorstr=#fff,gradientType=1);
    -ms-filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=0,finishx=100,finishy=0) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#483F96,endcolorstr=#fff,gradientType=1);/*IE8*/ 
    background:red; /* 一些不支持背景渐变的浏览器 */ 
    background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
}

360浏览器极速模式和兼容模式下产生的差异
1
<meta name="renderer" content="webkit">

a标签使用来绝对定位后，锚点会失效
- 锚点连接不要使用绝对定位

乱入两条js的

IE下可以用获取常规属性的方法来获取自定义属性，也可以用getAttribute()；FireFox中只能使用getAttribute()获取自定义属性
- 统一使用getAttribute();

IE下，event对象只有x/y属性；FireFox下，只有pageX/pageY属性

使用条件注释语句

<!--[if It IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js "></script>
<![end if]-->

兼容性起因

兼容性的重要性

目前常见的兼容方案

我在工作中遇到的部分兼容性问题

乱入两条js的

参考文章