前端浏览器兼容性-兼容ie的前端框架
市面上的浏览器种类繁多前端浏览器兼容性,不同浏览器的内核也不尽相同,因此各个浏览器对网页的解析也存在一定差异。
浏览器内核主要分为两种,一种是渲染引擎,一种是js引擎。 内核更倾向于说渲染引擎。
常见的浏览器内核:
常见的浏览器内核可分为四种:Trident、Gecko、Blink、Webkit
IE浏览器Trident内核,又称IE内核
Chrome Webkit 核心,现在是 Blink 核心
火狐浏览器Gecko内核,俗称火狐内核
Safari 浏览器 Webkit 内核
Opera 浏览器本来就是自己的 Presto 内核,后来加入了 Google 大军,从 Webkit 到 Blink 内核;
360浏览器IE+Chrome双核
猎豹浏览器IE+Chrome双核
百度浏览器IE内核
QQ浏览器Trident(兼容模式)+Webkit(高速模式)
常见的兼容性问题:
1.不同浏览器标签默认的outer patch(margin)和inner patch(padding)不同
解决方案:添加通配符 * { margin: 0; 填充:0; } 在 CSS 中
2、IE6双面边距问题; 如果在IE6中设置了float,同时设置了margin,就会出现margin问题
解决方法:设置display:inline;
3.当标签的高度设置小于10px时,会超过你在IE6和IE7中设置的高度
解决方法:对超过高度的label设置overflow:hidden前端浏览器兼容性,或者设置line-height的值小于你设置的高度
4.图片默认有间距
解决方案:img布局使用float
5. IE9以下浏览器不能使用opacity
解决方案:
不透明度:0.5; 过滤器:alpha(不透明度= 50); 过滤器:progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
6.边距重叠问题; 当相邻的两个元素设置margin margin时,margin取最大值,舍弃最小值;
解决方法:为了不让边重叠,可以在子元素上加一个父元素,并设置父元素为overflow:hidden;
7. 游标:safari 不支持手形显示手型
解决方法:统一使用cursor:pointer
8、两个块级元素,父元素设置为overflow:auto; 子元素设置为position:relative; 并且高度大于父元素,在IE6、IE7中会被隐藏而不是溢出;
解决方法:在父元素上设置position:relative