本文和大家重點(diǎn)討論一下IE與firefox下的Padding的不同，眾所周知IE在處理padding樣式的時(shí)候總是讓我們不那么順心，這里看一下在IE和Firefox下Padding的不同。

IE與firefox下的Padding的不同

于眾所周知的原因，IE在處理padding樣式的時(shí)候總是讓我們不那么順心，如下圖（圖片來(lái)自蘇沈小雨的CSS2中文手冊(cè)）：

在padding數(shù)值很大的地方（比如標(biāo)題欄的背景div和標(biāo)題之間），瀏覽器的差別就顯示的很明顯。
通過(guò)查詢，找到了一種Hack方法。比如CSS原來(lái)是這樣的：

.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中整個(gè)div的高度是140+2*(2em)約為190px，而在IE6和IE7中均為140px，這樣就導(dǎo)致有大概50px的差別。
只要這樣寫(xiě)：

.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;  
}  
 

也就是在下面添加一個(gè)*html塊(這個(gè)塊只有IE6+支持，F(xiàn)F不支持)，在里面把實(shí)際的數(shù)量寫(xiě)進(jìn)去就行了。

PS：來(lái)自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*/  
}  
 

不過(guò)根據(jù)實(shí)驗(yàn)，并不能得到合適的數(shù)值。

【編輯推薦】

1. IE6.0對(duì)padding的解讀分析
2. 實(shí)例解析CSS padding 屬性用法
3. DIV+CSS中padding和margin屬性用法
4. DIV+CSS開(kāi)發(fā)Xhtml網(wǎng)頁(yè)對(duì)SEO優(yōu)化的影響
5. DIV CSS網(wǎng)頁(yè)布局中對(duì)段落進(jìn)行排版的方法