css - 浏览器兼容

浏览器兼容

金三银四，那浏览器兼容你知多少？
常见浏览器的兼容性问题（面试重点）

常见的浏览器兼容问题以及解决方法

图片有边框bug

当图片加在ie上会出现边框

hack:给图片加border：0；或者border：0 none；

图片间隙

div中的图片间隙bug
在div中插入图片时图片将div下方撑大大约三像素

hack1：将与写在一行上；
hack2：将转换为块级元素，给添加声明display：block；

双倍浮向（双倍边距）（只有ie6出现）

当ie6及更低版本浏览器在解析浮动元素时会错误的把浮动边边距（margin）加倍显示。

hack：给浮动元素添加声明：display:inline;

表单元素行高对齐不一致

hack：给表单元素添加声明：float：left；

按钮元素默认大小不一

hack1：统一大小/（用a标记模拟）
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

百分比bug

在ie6以及以下版本中解析百分比时会四舍五入方式计算从而导致50%加50%大于100%的情况。（也会受系统影响）

给右边浮动的子元素添加clear：right；

为什么会存在浏览器兼容问题？

在各大浏览器厂商的发展过程中，它们对web的标准各有不同的实现，标准不同存在差异所以产生兼容性的问题。

浏览器内核

五大浏览器内核以及各内核代表作品：

• Trident: IE、Maxthon（遨游）、Theworld（世界之窗）
• Gecko: Mozilla Firefox
• Webkit: Safari、Chrome
• Presto: Opera
• Blink: 由Google和Opera Softwase开发的浏览器排版引擎

概念

CSS BUG

Css样式在各浏览器中解析不一致的情况，或者说Css样式在浏览器中不能正确显示的问题称为CSS Bug

CSS hack

CSS中，hack是指一种兼容css在不同浏览器中正确显示的技巧方法，因为他们都属于个人对css代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch（补丁）来描述这种行为。

Filter

它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，filter是一种用来过滤不同浏览器的hack类型。

过滤器(filter)

ps：过滤器可能这个说法有点不太正确，也可以说是浏览器标识符！

_下划线过滤器

当一个属性前面增加一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明。但是ie6及更低版本浏览器会继续解析。 语法：选择器{_属性：属性值；} 此方法是区分ie6浏览器和其他浏览器的方法

！important关键字过滤器

它表示所附加的声明具有最高优先级的意思，被浏览器优先显示（ie6不识别此写法）
语法：选择符{属性：属性值！important；}

*属性过滤器

当一个属性前面加了后，该属性能被ie7及以下浏览器识别，其他浏览器忽略该属性的作用
语法：选择器{属性：属性值；}

+属性过滤器

当一个属性前面加了+后，该属性能被ie7及以下浏览器识别，其他浏览器忽略该属性的作用
语法：选择器{+属性：属性值；}

*+属性过滤器

当一个属性前面加了+后，该属性能被ie7浏览器识别，其他浏览器忽略该属性的作用
语法：选择器{+属性：属性值；}

\9

ie版本识别，其他浏览器不识别
**语法：选择符{属性：属性值\9;} **

\0

ie8及以上浏览器识别，其他浏览器不识别
语法：选择符{属性：属性值\0;}

-moz-

Firefox浏览器识别，其他浏览器不识别

-webkit-

webkit内核浏览器识别，其他浏览器不识别

-o-

Opera浏览器识别，其他浏览器不识别

-ms-

ie浏览器识别，其他浏览器不识别