IE与firefox下的Padding的不同

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

目前创新互联已为1000+的企业提供了网站建设、域名、虚拟主机、网站托管维护、企业网站设计、黄山网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

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的不同
路径分享：http://www.shufengxianlan.com/qtweb/news45/83695.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联