CSS box model and IE browser

CSS Box Model diagram

Here is an illustration of how the CSS-applied element is showing its size.

in this article, all browsers are consistent in how the margin property is handled when calculating the total width of the box model, so we'll focus more on the padding and border properties.

the Box Model

first Look at "the box model", the standard written here, if no problem, it should be all the standard modern browser and IE6 and its subsequent version of the follow. in the box model, the total width of a block-level element is calculated according to the following equation:

Total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

The same calculation method is used for height.

IE Box model

The IE box model is calculated by: padding (padding) and borders (border) are not included in the calculated range.

Total width = margin-left + width + margin-right

This means that once an element has a horizontal fill and/or border, the actual content area is expanded to create the space they occupy.

about the version of IE

IE5.5 and earlier versions use the IE box model. IE6 and newer versions are standard box models used in standard compatibility mode. If you set a DOCTYPE for a document, IE will work in the same way as the standard compatibility mode. This box model problem only appears in IE5.5 and earlier versions.

Solve the problem

Now that the IE6 and subsequent versions follow the standard compatibility model, the only thing to focus on is how to make the pages in IE5.5 and earlier versions consistent with their rendering in modern browsers. 4 methods are listed below.

1. Avoid situations that cause the problem
2. Inserting additional tags
3. Use conditional comments to judge a statement
4. Using CSS Hacks

1. Avoid situations that cause the problem

Avoid setting the width and padding values at the same time for an element, or the width and border values, or the width and their two values at the same time. Ensures that all browsers will calculate the total width of the elements in the same way, regardless of which box model they use.

2. Inserting additional markers

Take an example to illustrate that the following HTML is used to define a news list:

<DivID= "News">
<H2>News</H2>
<ul>
<Li>
<H3>News Article 1</H3>
<P>Lorem ipsum dolor sit amet</P>
</Li>
<Li>
<H3>News Article 2</H3>
<P>Lorem ipsum dolor sit amet</P>
</Li>
</ul>
</Div>

To get a 250-pixel-wide list and apply a 1-pixel border and a 10-pixel fill, this CSS is used:

#news{
Padding:10px;
Border:1px solid #000;
Width:228px;
}

in a standard-compliant browser, the total width is 250px (1px border-left + 10px padding-left + 228px width + 10px padding-right + 1px border-right). In IE5.5 and earlier versions, the total width was only 228px, because it did not calculate the border and padding values.

So how do you avoid this problem? Let me assume that the news list is in another container, like it's in the sidebar (sidebar):

<DivID= "sidebar">
<DivID= "News">
...
</Div>
</Div>

If so, you can set the width for the parent container (sidebar) to achieve the effect:

#sidebar{width:250px}
#news{
Padding:10px;
Border:1px solid;
}

If this is not allowed, use the Insert extra tag method. Or the above example, insert a tag inside the #news:

<DivID= "News">
<Div>
<H2>News</H2>
<ul>
...
</ul>
</Div>
</Div>

Use the following CSS:

#news{width:250px}
#news Div{
Padding:10px;
Border:1px solid;
}

3. Use conditional comments to judge a statement

If you do not have a suitable parent container to control the width, and you cannot add tags to solve the problem, we need to set a different width value for Ie5.*/win.

The safest way is to use conditional comment judgment statements, which can only be parsed in Ie/win, and the following code is only executed in versions below IE6:

<!--[if Lt IE 6]>
<style type= "Text/css" >
#news{width:250px;}
</style>
<! [endif]-->

In this way, it is recommended that all code for Ie5.*/win be transferred to a separate CSS file to load it:

<!--[if Lt IE 6>
<link rel= "stylesheet" type= "Text/css" href= "/css/ie5.css" >
<! [endif]-->

4. Using CSS Hacks

#news{
Padding:10px;
Border:1px solid;
Width:250px;
Width:228px;
} 

all browsers will see and understand "width:250px", but Ie5.*/win will not read the following line, width:228px, but this row is parsed by other browsers. So finally, Ie5.*/win get the width value is 250px, other browsers get the width value is 228px. This ensures that the total width of the news list is consistent across all browsers.

Reprinted from: http://www.osmn00.com/translation/213.html

CSS box model and IE browser