前端浏览器的兼容性问题汇总
一、浏览器的内核
-
什么是浏览器的内核?
浏览器最重要或者说最核心的部分叫做“Rendering Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。 -
浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎,内核更加倾向于说渲染引擎。
-
常见的浏览器内核可以分四种:Trident、Gecko、Blink、Webkit
-
二、浏览器适配问题
- 盒模型差异
IE盒模型:margin 、 content(包含border、padding)
W3C盒模型: margin 、border、 padding、 content
解决方案:css 里增加通配符 * { margin: 0; padding: 0; }
CSS3中的box-sizing的属性就是为了这两种模式,border-box(IE盒明星)和content-box(W3C)
img标签-图片存在边距
使用 vertical-align 属性可以清楚这种边距
- nput.type
IE下不允许修改input的类型,Firefox可以修改。尽量避免修改input的类型。
- ID
在IE下,我们是可以通过document.idName来获取元素,但是Firefox是不允许的。
而且Firefox中我们使用与html对象ID相同的变量名,所以,获取元素最好使用document.getElementById(”idName”) 代替 document.idName,避免不必要的bug
-
IE6双边距问题;在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案:设置display:inline;
-
当标签的高度设置小于10px,在IE6、IE7中会超出自己设置的高度
解决方案:超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度
-
图片默认有间距
解决方案:使用float 为img 布局
- IE9一下浏览器不能使用opacity
解决方案:opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
-
边距重叠问题;当相邻两个元素都设置了margin 边距时,margin 将取最大值,舍弃最小值;
解决方案:为了不让边重叠,可以给子元素增加一个父级元素,并设置父级元素为overflow:hidden;
-
cursor:hand 显示手型在safari 上不支持
解决方案:统一使用 cursor:pointer
-
两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative
;且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;
解决方案:父级元素设置position:relative
参考链接
https://www.jianshu.com/p/0d72bc1ea573