经常遇到的浏览器的兼容性有哪些？ 原因，解决方法是什么，常用hack的技巧 ？

1.背景介绍

浏览器兼容性

网页浏览标准只规定了接口，并没有接口实现的详细规范，使得各浏览器对相同的功能使用了不同的实现方法，并导致了功能实现的差异。这些差异按程度由显示方面到核心概念都存在。为了使得用户在不同的浏览器访问网页时看到同样的显示内容和效果，就需要考虑浏览器的兼容性问题。

 

2.知识剖析

CSS Hack

面对浏览器诸多的兼容性问题，经常需要通过CSS样式来调试，其中用的最多的就是CSS Hack。所谓CSS Hack就是针对不同的浏览器书写不同的CSS样式，通过使用某个浏览器单独识别的样式代码，控制该浏览器的显示效果。

Hack 技巧

Firefox：

一般在所添加的样式前加-moz-

或者嵌套其专用的css语句：@-moz-document url-prefix()。

@-moz-document url-prefix() {  

    .css-hack {  

        color: blue; /* 只有FireFox显示为蓝色 */ 

    }  

} 

Chrome、Safari等Webkit内核的浏览器

一般在所添加的样式前加-webkit-

支持媒体类型查询语句：@media screen and (-webkit-min-device-pixel-ratio:0)。

@media screen and (-webkit-min-device-pixel-ratio:0) {   

    .css-hack {  

        color: blue; /* Webkit内核浏览器显示蓝色 */ 

    }  

} 

IE

属性值后缀\9

.css-hack {  

    background-color: red; /* 其他浏览器上显示为红色 */ 

    background-color: blue \9; /* 所有IE浏览器上显示为蓝色 */ 

} 

 

3.常见问题

各浏览器不同标签margin,padding不同

居中问题，div里的内容，IE默认为居中，而Firefox默认为左对齐

IE浮动 margin产生的双倍距离

ul标签在FF中默认是有 padding值的，而在IE中只有margin有值，还有缩进问题

 

4.解决方案

1. 各浏览器不同标签margin,padding不同

解决：*{margin:0;padding:0;}

2. 居中问题，div里的内容，IE默认为居中，而Firefox默认为左对齐

解决：margin: 0 auto;

3. IE浮动 margin产生的双倍距离

解决：#box {

        float:left;

        width:100px;

        margin:0 0 0 100px; //这种情况之下IE会产生200px的距离

        display:inline; //使浮动忽略

}

4. ul标签在FF中默认是有 padding值的，而在IE中只有margin有值，还有缩进问题

解决：{list-style:none;margin:0px;padding:0px;}

 

5.编码实战

 

6.扩展思考

Hack 的弊端

1. 无法知道为什么这个浏览器比那个浏览器多出10个像素了，越来越多的不知道将导致你对css的迷惑。你将越来越依赖hack。
2. 比如双倍距bug，加上display:inline就能解决问题了，并不需要用到hack来取掉那一倍的宽度。
3. 使csser对css、对浏览器特性（或者说是漏洞）的理解停滞不前，所以应尽量避免hack的使用。

 

7.参考文献

WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

https://blog.csdn.net/xustart7720/article/details/73604651

浅谈各种浏览器下的CSS Hack兼容性写法

https://www.jb51.net/css/439843.html

html和css中常见的浏览器兼容性处理

http://www.zymseo.com/16.html

hack该不该用

https://sjolzy.cn/This-should-not-be-used-hack.html

 

8.更多讨论

1. opacity属性在IE浏览器的写法

2. img标签的兼容问题

3. IE6/7这么老的浏览器还需要考虑兼容性吗

 

9.鸣谢

感谢大家观看