浏览器兼容性

浏览器兼容性

兼容的必要性

不同浏览器的内核不同，常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit，所以各个浏览器对网页的解析存在一定的差异。为了使得我们的网页在浏览器中能呈现完美的样子，我们在开发过程中需要考虑浏览器的兼容问题。

常见IE浏览器兼容方法

一、IE属性过滤（hack方法）

字符	说明
-	只有IE6可以识别
*	只有IE6/7可以识别
\9	IE8以下可以识别

IE的不支持部分

1、IE6不兼容点线，要是非要这个效果的话就切背景平铺唠；
2、IE6 border 不支持transparent ;
3、IE6仅支持a标签的伪类，IE7支持所以元素的伪类，但是不支持表单的focus；
4、IE6、7不支持display：table，inline-block等属性；
5、IE6、IE7不支持min-width, min-height, max-width, max-height；
6、IE6、7 滤镜要这样写：filter：alpha(opacity=56);
7、IE6不兼容固定定位，只能用JavaScript去解决；
8、IE6不支持PNG图片的透明效果；
9、IE6、7、8实现透明效果只能通过滤镜；

二、兼容性问题及解决办法

1. IE6双边距bug：
   在IE6下，块元素有浮动和横向margin值，横向的margin会变成两倍。和margin方向有关系。 解决办法： 将块元素转成内嵌元素。display：inline；

2. IE6的子元素可以撑开父元素：
   解决办法：进行精确的计算父子级关系。当然可以通过overflow：hidden将超出的子元素隐藏掉。

3. 若元素浮动，则一行全浮动。否则会出现边距问题（主要是IE6）甚至奇葩问题，其他浏览器好像也有

4. 如果给input加背景，那么在输入内容超过输入框长度时，背景会移动：
   解决办法：把input放在div里面，让input的背景透明，并且把背景头给div。

5. IE6、7下几px的间隙问题：
   li本身没有浮动，但是内容的浮动让li多出来几px的间隙。
   解决办法：
   1、给li加浮动，
   2、给li加vertical-align：top/middle/bottom 也可以用来清除图片下的间隙
   图片也可以display：block；解决，但是多图片同行就不行了

6. IE6最小高度问题：
   元素高度小于19px的会被当做19px处理。 解决办法：
   1、加font-size：0;解决办法有局限
   2、overflow：hidden；

7. IE6 当绝对定位和浮动元素并列的时候，绝对定位元素会消失。 解决办法：自然是去掉并列关系。给定位包个div

8. IE6、7下输入类型的表单控件，默认上下有1px的边距。 解决办法：让控件脱离文档流。

9. 输入类型表单控件border：none；无效 解决办法：border：0，或者给input重置背景。

10. 一个div中的元素全浮动，会除掉div的margin-bottom，但是IE6不会。
    对div进行清除浮动；

a 标签的几种 CSS 状态的顺序

正确的a标签顺序应该是：

• link:平常的状态
• visited:被访问过之后
• hover:鼠标放到链接上的时候
• active:链接被按下的时候

在各个浏览器下img有空隙

解决方法:让图片浮动。

li之间有间距

解决方法：li 设置vertical-align:middle;