HOBALL 筆記簿

October 21, 2008

CSS Hacks : 修復 IE 的 Padding 錯誤

Filed under: HTML+CSS — Tags: , , , — hoball @ 12:49 pm

轉載自 http://www.cnblogs.com/biggates/archive/2008/04/01/1133717.html

由於眾所周知的原因,IE在處理 padding 樣式的時候總是讓我們不那麼順心,如下圖(圖片來自蘇沈小雨的CSS2中文手冊):

padding 屬性示意圖

在 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:right center;
}

其中的 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:right center;
}


*html .titleblock
{}{
height
:190px;
}

也就是在下面添加一個 *html 塊(這個塊只有IE 6+ 支持,FF不支持),在裡面把實際的數量寫進去就行了。

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

div {}{
width
: 100px;
padding
: 10px;
border
: 10px solid #000;
}

* html div
{}{
\width
: 140px; /**//* for IE5 and IE6 in quirks mode */
w\idth
: 100px; /**//* for IE6 in standards mode */
}

不過根據實驗,並不能得到合適的數值。

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: