市场上浏览器种类很多,不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎,内核更加倾向于说渲染引擎。
常见的兼容性问题:
(一)不同浏览器的标签默认的外补丁( margin )和内补丁(padding)差异较大。
解决方案: css 里增加通配符 * { margin: 0; padding: 0; }
(二)img图片有默认的间距? 及时你在style里面添加了 通配符:{margin:0;padding:0;也无济于事}
解决方案:使用float 为img 布局
(三)IE9以下的浏览器不能使用opacity (opacity意为不透明)
解决方案:IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。FF:opacity:0.6。
(四)cursor:hand 显示手型在safari 上不支持 safari也就是苹果浏览器
解决方案:统一使用 cursor:pointer
(五)两个块级元素,父元素设置了overflow:auto;子元素设置了position:relative ;且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;
解决方案:父级元素设置position:relative
(六)innerText在IE中能正常工作,但在FireFox中却不行. 需用textContent。
解决方案:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
(七)FF和IE的盒子(box)模型解释不一致导致相差2px
box.style{width:100;border1px;}
ie理解为box.width =100
ff理解为box.width =100 + 1*2 = 102 //加上边框2px
解决方案:div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反, IE不能识别!important这个属性,但别的浏览器可以识别。所以在IE下其实解释成这样:div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
(八)Div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高:line-height:200px;然后插入文字,就垂直居中了。缺点是要控制内容不要换行。
(九)元素水平居中问题
FF: margin:0auto;
IE: 父级{ text-align:center; }
(十)居中问题?
div里面的文字内容,IE默认是居中显示的,但是FF是左边对齐显示
解决方案:添加一个margin 0 aotu;
后续会继续更新.....