建站
咨詢
售后
建站咨詢
新聞中心
本文和大家重點(diǎn)討論一下IE與firefox下的Padding的不同，眾所周知IE在處理padding樣式的時(shí)候總是讓我們不那么順心，這里看一下在IE和Firefox下Padding的不同。
目前創(chuàng)新互聯(lián)已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、黃山網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
IE與firefox下的Padding的不同
于眾所周知的原因，IE在處理padding樣式的時(shí)候總是讓我們不那么順心，如下圖（圖片來自蘇沈小雨的CSS2中文手冊(cè)）：
在padding數(shù)值很大的地方（比如標(biāo)題欄的背景div和標(biāo)題之間），瀏覽器的差別就顯示的很明顯。
通過查詢，找到了一種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中整個(gè)div的高度是140+2*(2em)約為190px，而在IE6和IE7中均為140px，這樣就導(dǎo)致有大概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;
- }
也就是在下面添加一個(gè)*html塊(這個(gè)塊只有IE6+支持，F(xiàn)F不支持)，在里面把實(shí)際的數(shù)量寫進(jìn)去就行了。
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*/
- }
不過根據(jù)實(shí)驗(yàn)，并不能得到合適的數(shù)值。
文章題目：IE與firefox下的Padding的不同
地址分享：http://www.5511xx.com/article/dhjedcs.html
