firefox 不兼容 encodeuricomponent_CSS 兼容性

兼容性产生原因

浏览器内核不同

早期浏览器 没有出现 W3C标准

早期 IE浏览器不会更新 与windows系统绑定

浏览器内核

IE6、IE7、IE8（Trident 4.0）

Chrome浏览器内核：Chromium内核 Webkit Blink内核；

Firefox浏览器内核：Gecko内核

Safari浏览器内核：Webkit内核；

Opera浏览器内核：Presto内核；

CSS兼容性问题

1、IE6下怪异盒模型

2、IE6下最小高度问题

3、IE6下不支持1px的点划线

4、IE6下父级高度被撑开的问题

1、内容会把父级的高度撑开

2、子元素会把父级的宽高都撑开

5、IE6下只支持给a标签添加伪类

6、 inline- block问题

1、IE67下不支持给块标签加 display: inline- block

2、IE6下元素中除了文字之外,还有 inline- block类型元素,元素的行高会失效

7、透明度问题

8、IE6下浮动间隙问题

1、前面元素浮动,后面元素不浮动。他们之间会有间隙

2、前面元素浮动,后面元素不浮动,但是有 margin值(等于第前面元素的宽度)。它们之间会有

9、 margin问题

1、 margin传递(除了IE67)

2、 margin叠压(所有浏览器)

3、 margin失效(IE67)

4、 margin负值(IE6)

5、IE6下双边距(IE6)

10、IE6下文字溢出的问题

11、IE671间隙问题

12、定位间题

1、IE6不支持固定定位

2、IE67下子级有相对定位,宽高并且比父级要大。那父级 overflow: hidden;后是包不住它的

3、IE6下同一层级的浮动元素会盖住绝对定位元素

4、IE6下定位父级的宽高是奇数的话,元素的 right值或者 bottom值会有1px的偏差

13、表单问题

1、IE67下输入类型的表单控件,上下两边各有1px的间隙

2、IE6下输入框的背景会跟着输入的文字移动

3、IE6下输入类型的表单 border:none无效

4、IE6下1abe1必需加for

14、p标签嵌套div标签的问题

15、IE8以及IE8之前不识别H5标签

16、PNG问题

IE6不支持png透明图片

<!--[if lte IE 6]> 
<script src="JS/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script> 
<script type="text/javascript"> 
DD_belatedPNG.fix('div, ul, img, li, input , a, .png_bg'); 
</script> 
<![endif]--> 

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true' , sizingMethod='' , src='mini.jpg')

17、 css hack

18、 important

19、条件注释

浏览器发展前景

浏览器市场份额

网站流量平台 - 百度统计流量研究院​tongji.baidu.com

浏览器列表