這篇文章將為大家詳細(xì)講解有關(guān)如何理解IE與firefox下的Padding的不同，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計，網(wǎng)站模板，微信公眾號開發(fā)，軟件開發(fā)，小程序制作，十多年建站對成都廣告設(shè)計等多個領(lǐng)域，擁有豐富的網(wǎng)站建設(shè)經(jīng)驗。

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

IE與firefox下的Padding的不同

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

在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中整個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;  }

也就是在下面添加一個*html塊(這個塊只有IE6+支持，F(xiàn)F不支持)，在里面把實際的數(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ù)值。

關(guān)于如何理解IE與firefox下的Padding的不同就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享文章：如何理解IE與firefox下的Padding的不同
網(wǎng)站路徑：http://chinadenli.net/article30/jigjso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、域名注冊、網(wǎng)站收錄、電子商務(wù)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)