IE和 Firefox中的宽度显示差异

PHPABC CSS 879 次浏览 , , , 没有评论

WEB开发中,在做浏览器兼容性测试时常常发现IE和Firefox/Chrome的宽度不同,在IE中正常的宽度到了Firefox或Chrome中就变宽撑大了,界面就变得很奇怪。因为界面相对属于小问题就一直没有仔细研究,稍微改改看上去差得不多就算了。今天终于查了一下原因,顿悟~

Firefox是按W3C的标准执行,标准CSS中所指的width的宽度只包含容器中内容的宽度。而Internet Explorer中的width则是指整个容器的宽度,包括内容宽度,padding和border。也就是说,Firefox中:容器占的宽度=CSS 中定义的容器宽度+padding宽度+border宽度;而IE中:容器占的宽度=CSS中定义的容器宽度(已包含padding和border)。
举例来说,如果IE中定义 width:120px;padding:5px的话,所显示的宽度就是120px,即padding:5px是在width里面。而Firefox 中,上面这个定义,显示宽度就是 125px。

由于Firefox支持 !important而IE会忽略, 因此可用 !important 来解决该问题,即定义CSS如下:

 width:115px !important;width:120px;padding:5px;

注意: !important; 一定要在前面。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go