浏览器兼容性问题，是因为不同浏览器的内核不同，导致各个浏览器对网页的解析存在一定的差异，对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。做前端最怕什么？就是IE6！调个兼容能被搞得心力憔悴。前端最喜欢看到的就是各家浏览器大统一，告别浏览器兼容调试。
常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit
| 浏览器 | 内核 |
|---|---|
| IE浏览器 | Trident内核，也称为IE内核 |
| Chrome浏览器 | Blink内核 |
| Firefox浏览器 | Gecko内核，俗称Firefox内核 |
| Safari浏览器 | Webkit内核 |
| Opera浏览器 | 最初是自己的Presto内核，后来从Webkit又到了Blink内核； |
| 360浏览器 | IE+Chrome双内核 |
| 猎豹浏览器 | IE+Chrome双内核 |
| 百度浏览器 | IE内核 |
| QQ浏览器 | Trident（兼容模式）+Webkit（高速模式） |
以下列出一些常见的浏览器兼容问题：
1.不同浏览器的标签默认的margin和padding不同
不同的标签，不加样式控制的情况下，各自的margin 和padding差异较大。
- 解决方案：
可以使用Normalize.css来清除默认样式，也可以使用如下代码：
body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }
2.设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
- 解决方案
给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
3.IE6双边距问题，在IE6中设置了float , 同时又设置margin , 就会出现边距问题
- 解决方案：
设置display:inline;
4.图片默认有间距
- 解决方案：
使用float 为img 布局
5.IE9一下浏览器不能使用opacity
- 解决方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
6.cursor:hand 显示手型在safari 上不支持
- 解决方案：
统一使用 cursor:pointer
7.边距重叠问题
当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
- 解决方案：
为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；
8.两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
- 解决方案：
父级元素设置position:relative
9.标签最低高度设置min-height不兼容
min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
- 解决方案：
如果我们要设置一个标签的最小高度200px，需要进行的设置为：
{min-height:200px; height:auto ![ImportAnt]; height:200px; overflow:visible;}
在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼。下面针对不同浏览器列出其专用写法：
| 浏览器 | 写法 |
|---|---|
| 通用 | height: 100px; |
| IE6 专用 | _height: 100px; |
| IE6 专用 | *height: 100px; |
| IE7 专用 | *+height: 100px; |
| IE7、FF 共用 | height: 100px !important; |
————愿你在迷茫时，坚信你的珍贵，爱你所爱，行你所行，听从你心，无问西东。
网友评论