浏览器常见兼容问题

1、 ie中图片边框问题

Ie 中图片放在a标签中显示边框。
解决方案:

 img{
border:none;
}

2、 ie8中背景复合属性写法问题

如下代码，在标准浏览器中均能正常显示背景图片，但是在ie8中图片显示异常。

.bg{ 
background:url(“images/bg.jpg”)no-repeat center;
}

解决方案：在url和no-repeat之间加上空格。

.bg{ 
background:url(“images/bg.jpg”) no-repeat center;
}

• 透明度兼容

1. Rgba() ie9以下不支持
2. Opacity ie9以下不支持
3. Filter:alpha(opacity=50) ie9及以下支持

3、其他ie低版本兼容性问题了解

1.在 IE6 及更早版本浏览器中，定义小高度的容器。

解决方案：

#test{
  overflow:hidden;
  height:1px;
  font-size:0;
  line-height:0;
}

2.IE6 及更早版本浏览器下，浮动时产生双倍边距的 BUG 。

解决方案：针对 ie6 设置该标签的 display 属性为 inline 即可。

#test{
  float:left;
  _display:inline;
} 

3.IE7 及更早版本浏览器下，子标签相对定位时父标签 overflow 属性的 auto|hidden 失效的问题。

解决方案：给父标签也设置相对定位 position:relative;

4.块转内联块 ie7- 不在一行显示问题

解决方案：

div {
   display:inline-block;
  *display:inline;
  *zoom:1;
}

5.IE7 及更早版本浏览器下，当 li 中出现 2 个或以上的浮动时，li之间产生的空白间隙。

解决方案：将垂直对齐方式设置为除了 top 值，还可以设置其它值如 middle | bottom 等。

li{
  vertical-align:top;
}

CSS Hack

使用 CSS Hack 可以控制不同浏览器及版本之间的显示差异，某些情况下处理兼容问题可以事半功倍，但滥用会影响页面性能，也会导致后期维护困难，因此尽可能减少对CSS Hack 的使用。

1 条件 Hack

• 用于选择 IE 浏览器及 IE 的不同版本。
• if 条件 Hack 是 HTML 级别的（包含但不仅是 CSS 的 Hack，可以选择任何 HTML 代码块）。
• if 条件共包含 6 种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本。
• ● 大于：选择大于指定版本的 IE 版本。关键字：gt（greater than）。
• ● 大于或等于：选择大于或等于指定版本的 IE 版本。关键字：gte（greater than or equal）。
• ● 小于：选择小于指定版本的 IE 版本。关键字：lt（less than）。
• ● 小于或等于：选择小于或等于指定版本的 IE 版本。关键字：lte（less than or equal）。
• ● 非指定版本：选择除指定版本外的所有 IE 版本。关键字：!。 示例：

只在 IE 中可见：

<!--[if IE]>
	<p> 只在 IE 中能看到这个段落 </p>
<![endif]-->

只有 IE6 以上，才能看到应用了 test 类的标签是红色文本：

<!--[if gt IE 6]>
	<style>
		.test{color:red;}
	</style>
<![endif]-->

IE10 及以上版本已将条件注释特性移除，使用时需注意。

2 属性级 Hack

在CSS样式属性名前或值后面加上一些只有特定浏览器才能识别的hack前缀或后缀，以达到预期的页面展现效果。

1. ● _ 下划线：选择 IE6 及以下
2. ● *：选择 IE7 及以下
3. ● \0：选择 Ie8-9

示例：

color:red; /* 所有浏览器可识别*/
_color:red; /* 仅IE6 识别 */ *
color:red; /IE6、IE7 识别 /
color:red\0; / IE8、IE9 识别/

3 选择符级 Hack

• html IE6 及更早浏览器
  示例：

html .box{ background:red; } // 只有在 IE6 显示红色

• html IE7
  示例：

html .box{ background:red; } // 只有在 IE7 显示红色