IE与firefox下的Padding的不同

开发 前端
CSS中的Padding属性有很多值得学习的地方,那么IE与firefox下的Padding属性的用法又有哪些不同呢,这里就和大家分享一下。

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

IE与firefox下的Padding的不同

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


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

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

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

  1. .titleblock{}{  
  2. padding:2em;margin:0;text-align:left;  
  3. background-image:url(‘../image/titlebg.jpg’);height:140px;  
  4. background-repeat:no-repeat;background-position:rightcenter;  
  5. }  
  6.  
  7. *html.titleblock{}{  
  8. height:190px;  
  9. }  
  10.  

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

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

  1. div{}{  
  2. width:100px;  
  3. padding:10px;  
  4. border:10pxsolid#000;  
  5. }  
  6. *htmldiv{}{  
  7. \width:140px;/**//*forIE5andIE6inquirksmode*/  
  8. w\idth:100px;/**//*forIE6instandardsmode*/  
  9. }  
  10.  

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

【编辑推荐】

  1. IE6.0对padding的解读分析
  2. 实例解析CSS padding 属性用法
  3. DIV+CSS中padding和margin属性用法
  4. DIV+CSS开发Xhtml网页对SEO优化的影响
  5. DIV CSS网页布局中对段落进行排版的方法

 

责任编辑:佚名 来源: haohtml.com
相关推荐

2010-08-24 10:53:49

CSSpaddingIE

2010-09-09 16:47:49

CSS paddingFirefox

2010-08-27 15:56:52

IEFirefoxCSS

2010-08-18 13:23:36

2010-08-20 14:47:02

IEFirefoxCSS

2010-08-17 15:21:17

IEFirefoxHTML

2010-08-20 13:34:12

IEFirefoxJavascript

2010-08-20 13:02:09

IEFirefox

2010-08-23 14:51:37

IE6.0padding

2010-08-18 15:41:38

IE6E7Firefox

2009-06-10 21:55:39

打开JavaScripIEFirefox

2010-10-09 12:43:20

JSfirefox

2009-06-09 21:46:18

JavaScript差IEFirefox

2010-09-06 15:06:29

IE6IE7Firefox

2010-08-20 10:12:14

IEFirefox

2010-04-26 10:39:56

IEFirefox安全

2010-09-16 13:17:31

IE6IE7IE8

2010-08-20 09:33:22

IE6IE7IE8

2010-08-20 12:45:41

IE6IE7Firefox

2010-08-19 13:54:51

FirefoxIECSS
点赞
收藏

51CTO技术栈公众号