首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

IE跟firefox中的宽度显示差异

2012-10-28 
IE和firefox中的宽度显示差异WEB开发中,在做浏览器兼容性测试时常常发现IE和FF/Chrome的宽度不同,在IE中正

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

热点排行