CSS hacks: fixed the padding error of IE.

Due to the well-known reasons, ie always makes us less comfortable when dealing with padding styles, such as (the picture is from Su Shen XiaoYu's css2 Chinese manual ):

When the padding value is large (for example, the background Div of the title bar and the title), the difference in the browser is obvious.
A hack method is found through the query. For example, CSS was originally like this:

. Titleblock {}{
Padding: 2em; margin: 0; text-align: left;
Background-image: URL ('../image/titlebg.jpg'); Height: 140px;
Background-repeat: No-Repeat; Background-position: Right Center;
}

The height attribute is 140px. In ff, the height of the entire div is 140 + 2 * (2em), which is about pixel PX. in IE6 and IE7, both are 140px, this leads to a difference of about 50px.
Write as follows:

. 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: pixel PX;
}

That is to say, add an * HTML block below (this block is only supported by IE 6 +, and FF is not supported), and write the actual quantity into it.

PS: The method from the http://webdesign.about.com/od/css/a/aaboxmodelhack.htm is: 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 */
}

However, according to the experiment, we cannot obtain a proper value.

Reference Source: http://www.cnblogs.com/Randy0528/archive/2007/09/29/910760.html