如何理解IE与firefox下的Padding的不同

这篇文章将为大家详细讲解有关如何理解IE与firefox下的Padding的不同，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发，网站制作，网站设计，网站模板，微信公众号开发，软件开发，小程序制作，十多年建站对成都广告设计等多个领域，拥有丰富的网站建设经验。

和大家重点讨论一下IE与firefox下的Padding的不同，众所周知IE在处理padding样式的时候总是让我们不那么顺心，这里看一下在IE和Firefox下Padding的不同。

IE与firefox下的Padding的不同

于众所周知的原因，IE在处理padding样式的时候总是让我们不那么顺心，如下图（图片来自苏沈小雨的CSS2中文手册）：

在padding数值很大的地方（比如标题栏的背景div和标题之间），浏览器的差别就显示的很明显。
通过查询，找到了一种Hack方法。比如CSS原来是这样的：

.titleblock{}{  padding:2em;margin:0;text-align:left;  background-image:url(‘../image/titlebg.jpg’);height:140px;  background-repeat:no-repeat;background-position:rightcenter;  }

其中的height属性为140px，在FF中整个div的高度是140+2*(2em)约为190px，而在IE6和IE7中均为140px，这样就导致有大概50px的差别。
只要这样写：

.titleblock{}{  padding:2em;margin:0;text-align:left;  background-image:url(‘../image/titlebg.jpg’);height:140px;  background-repeat:no-repeat;background-position:rightcenter;  }   *html.titleblock{}{  height:190px;  }

也就是在下面添加一个*html块(这个块只有IE6+支持，FF不支持)，在里面把实际的数量写进去就行了。

PS：来自http://webdesign.about.com/od/css/a/aaboxmodelhack.htm的方法是：

div{}{  width:100px;  padding:10px;  border:10pxsolid#000;  }  *htmldiv{}{  \width:140px;/**//*forIE5andIE6inquirksmode*/  w\idth:100px;/**//*forIE6instandardsmode*/  }

不过根据实验，并不能得到合适的数值。

关于如何理解IE与firefox下的Padding的不同就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。