`

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; 一定要在前面。
分享到:
评论

相关推荐

    IE和Firefox差异参考大全

    在互联网的早期,IE(Internet Explorer)和Firefox(火狐浏览器)是两个主要的Web浏览平台,它们在处理CSS(层叠样式表)和JavaScript方面存在显著的差异。这些差异对于开发者来说至关重要,因为它们影响了网站在...

    js在IE与firefox的差异集锦

    特别是在使用JavaScript编程语言时,IE和Firefox两个浏览器在很多方面的实现都存在差异。本文将详细介绍这些差异并提供相应的解决方法。 1. 关于innerText属性的支持: Firefox浏览器不支持innerText属性,而支持...

    让IE和火狐同时兼容

    特别是在早期的Web时代,Internet Explorer(简称IE)与Mozilla Firefox(简称火狐)这两款浏览器之间存在着显著的差异,这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...

    Javascript的IE和Firefox(火狐)兼容性

    ### Javascript的IE与Firefox(火狐)兼容性解决方案 在Web开发过程中,浏览器兼容性问题一直是开发者们关注的重点之一。由于不同的浏览器对于Web标准的支持程度存在差异,这导致了同样的代码在不同浏览器中的表现...

    IE6.0、IE7.0 与FireFox CSS兼容的解决方法

    在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE6.0、IE7.0与Firefox等不同浏览器之间的差异。以下是一些解决这些浏览器间CSS兼容问题的方法: 1. **DOCTYPE声明**:DOCTYPE声明会...

    多浏览器下IE6 IE7 firefox li 间距问题

    ### 解决多浏览器下IE6、IE7及Firefox中`<li>`元素间距兼容...通过以上方法,我们可以有效地解决多浏览器下尤其是IE5、IE5.5、IE6、IE7及Firefox中`<li>`元素间距兼容性问题,确保页面在各种浏览器中的一致性和美观性。

    js、css在IE和火狐上的差异和处理方法

    - **盒模型**:IE采用的是自己的盒模型,将边框和内填充包含在元素的宽度和高度中,而Firefox遵循W3C标准盒模型,宽度和高度不包括边框和内填充。 - **透明度**:IE8及更早版本使用`filter`属性来实现透明,例如`...

    IE与Firefox的CSS兼容大全

    在网页设计中,CSS(层叠样式表)的兼容性是一个关键问题,特别是对于历史悠久的Internet Explorer(IE)和相对现代的Firefox浏览器。由于这两者对CSS标准的解析方式不同,开发者经常面临兼容性挑战。以下是一些针对...

    difference between IE and Firefox

    在压缩包"develop in IE and Firefox"中,可能包含的是针对这两种浏览器开发的示例代码、测试用例或解决兼容性问题的策略,可以帮助开发者更好地理解并处理IE和Firefox之间的差异。通过深入研究这些文件,开发者可以...

    css兼容性(IE 和 firefox)技巧大全.doc

    在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE(Internet Explorer)和Firefox这两个浏览器之间的差异时。本文主要针对这些差异提供了一些实用的技巧,帮助开发者解决常见的CSS兼容...

    javascript和css在IE和Firefox中的不同点

    JavaScript 和 CSS 在不同的浏览器上,特别是 Internet Explorer (IE) 和 Mozilla Firefox 之间存在一些差异,这些差异主要体现在解析规则、实现细节以及某些功能的支持上。理解这些差异对于编写跨浏览器兼容的代码...

    IE与Firefox的CSS兼容大全.rar

    在网页设计领域,IE(Internet Explorer)和Firefox是两种截然不同的浏览器,它们对CSS(Cascading Style Sheets,层叠样式表)的支持存在一定的差异。"IE与Firefox的CSS兼容大全"是一个针对这两个浏览器之间CSS兼容...

    CSS兼容IE和Firefox的技巧集合.rar

    在网页设计领域,CSS(Cascading Style Sheets)是用于控制网页布局和样式的语言,但不同的浏览器在解析和执行CSS规则时可能存在差异,尤其是在早期版本的Internet Explorer(IE)和Firefox之间。这个"CSS兼容IE和...

    CSS兼容IE和Firefox的技巧集合

    IE6、7使用了其独有的“怪异盒模型”,其中元素宽度包括了边框和内填充,而Firefox等其他浏览器遵循W3C标准的盒模型,宽度仅包含内容区域。为解决此问题,可以使用`box-sizing`属性,将其设置为`border-box`使所有...

    ie与firefox兼容文档

    3. **盒模型差异**:IE使用“怪异盒模型”,其中边框和内填充包含在元素宽度内,而Firefox和其他现代浏览器遵循“标准盒模型”,边框和内填充不计入宽度。这会导致元素大小计算的差异。 4. **DOCTYPE声明**:...

    ie和火狐浏览器兼容问题

    在网页开发过程中,浏览器兼容性问题常常困扰着开发者,尤其是IE和Firefox之间的差异。以下是一些针对CSS在IE和Firefox浏览器中的兼容性问题及其解决策略: 1. **DOCTYPE影响CSS处理**:不同的DOCTYPE声明会影响...

    可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]

    "可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]"这个标题所描述的是一种增强用户界面的技术,它允许用户通过鼠标直接拖动来改变表格中单元格的宽度,从而更好地适应显示需求。这种功能在数据展示和分析...

Global site tag (gtag.js) - Google Analytics