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; 一定要在前面。