常见CSS的浏览器兼容问题

1. 边框

• border-radius: 最低兼容至 IE9,其它浏览器兼容情况优良。
• box-shadow: 最低兼容至IE9, 其它浏览器兼容情况优良。

2. 背景

• background-size: 最低兼容至IE9, 其它浏览器兼容情况优良。

3. 字体

• @font-face: IE9及以上版本的IE浏览器，支持引入任何格式的字体文件，而在IE9之前的浏览器，只支持引入EOT格式的字体文件。 其它浏览器兼容情况优良。

4. 2D转换

• transform: 最低兼容至IE9（需要添加-ms-前缀），其它浏览器兼容情况优良。

  在transform属性前加入浏览器内核前缀是很好的实践。不建议在svg元素上使用transform属性，最新版本的IE并不支持这一使用方式。

5. 3D转换

• IE10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webkit-。Opera 仍然不支持 3D 转换，它只支持2D 转换。

6. 过渡

• transition:最低兼容至IE10，其它浏览器兼容情况优良。

  Safari浏览器需要前缀-webkit-，其它大部分浏览器对此并未有前缀要求，因此除了特殊情况，可以不添加其它浏览器的前缀。

7. 动画

• animation:兼容情况与transition属性大致相同。

8. 双倍浮动bug

（块状元素设置了float属性后，又设置了横向的margin值，在IE6下显示的margin值要比设置的值大）

• 给float的元素添加 display:inline;将其转换为内联元素；

9. 表单元素行高不一致

• 给表单元素添加vertical-align:middle;

• 给表单元素添加float:left；

10. IE6（默认16px为最小）不识别较小高度的标签（一般为10px）

• 给标签添加overflow:hidden;
• 给标签添加font-size:0;

11. 图片添加超链接时，在IE浏览器中会有蓝色的边框

• 给图片添加border:0或者border：none;

12. 最小高度min-height不兼容IE6

• min-height:100px;_height:100px;
• min-height:100px;height:auto!important;height:100px;

13. 图片默认有间隙

• 给img添加float属性；
• 给img添加display：block;

14. 按钮默认大小不一

• 如果按钮是一张图片，直接用背景图作为按钮图片；
• 用a标记模拟按钮，使用JS实现其他功能；

15. 百分比bug

（父元素设置100%，子元素各50%，在IE6下，50%+50%>100%）

• 给右边的浮动元素添加clear:right；

16. 鼠标指针bug

• cursor:hand 只有IE浏览器识别；
• cursor:pointer;IE及以上浏览器和其他浏览器都识别（手型）；

17. 透明度设置，IE不识别opacity属性

• 标准写法：opacity:value;(取值范围0-1)；
• 兼容IE浏览器 filter:alpha(opacity=value);(取值范围1-1