小谢第42问:IE浏览器常见兼容问题

IE6双边距

行内属性设置了块级属性(display: block;)后,会产生双倍边距。

解决方案是在添加一个 display: inline; 或者 display: table;

双倍margin

浮动元素设置了margin在IE6下会产生双倍margin。

只要给浮动元素设置 display: inline;就可以了。或者说使用IE6的hack:_margin;

盒模型差异

IE盒模型:margin 、 content(包含border、padding)

W3C盒模型: margin 、border、 padding、 content

CSS3中的box-sizing的属性就是为了这两种模式,border-box(IE盒明星)和content-box(W3C)

img标签-图片存在边距

使用 vertical-align 属性可以清楚这种边距

顺便说下a标签同样会存在边距,具体的解决方法可以看看去除inline-block元素间间距的N种方法;

IE6 高度无法小于10px

添加overflow的属性

设置font-size的属性为高度的大小

js部分
获取属性

根据很多的人的反馈来看,无论是常规的获取自定义属性,或是jq的attr()在不同的环境下都是存在着些许兼容性问题,所以为了保险起见,最好是使用原生的getAttribute()来获取属性;

ID

在IE下,我们是可以通过document.idName来获取元素,但是Firefox是不允许的。

而且Firefox中我们使用与html对象ID相同的变量名,所以,获取元素最好使用document.getElementById(”idName”) 代替 document.idName,避免不必要的bug

input.type

IE下不允许修改input的类型,Firefox可以修改。尽量避免修改input的类型。

 

猜你喜欢

转载自www.cnblogs.com/xieoxie3000question/p/13364443.html