IE和firefox中的宽度显示差异
WEB开发中,在做浏览器兼容性测试时常常发现IE和FF/Chrome的宽度不同,在IE中正常的宽度到了FF或Chrome中就变宽撑大了,界面就变得很奇怪。因为界面相对属于小问题就一直没有仔细研究,稍微改改看上去差得不多就算了。今天终于查了一下原因,顿悟~
FF是按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。
由于FF支持 !important而IE会忽略, 因此可用 !important 来解决该问题,即定义CSS如下:
width:115px !important;width:120px;padding:5px;
注意: !important; 一定要在前面。