CSS compatibility solution (Box Model )-! Important's IE7 and Firefox Problems

Many of the above content is part of the introduction. If you have a better understanding of these content, you can directly jump to the "Solution to the box model problem" below to view the main content.

Let's talk about it first! Important Problem (Box Model Problem ):

In the CSS standard, a box model consists of four areas: content, padding, border, and margin ). CSS has its standard for calculating the width. But in fact, different browsers have different performances. For example,
Firefox (FF) is accurate according to CSS standards:Width indicates the content width.That is to say:
Layer width = "width" + "padding (left and right)" + "border-width ";
WhileIe uses width as the width of the entire layer.:
Content width = "width"-"padding"-"border-width"; reference content2007.10.03 update: IE7 fixed the bug of the box model in an update, which is consistent with Firefox parsing. 2007.10.03 verification.

This parsing of IE is considered a bug. But in fact, this explanation is not without reason. People pay more attention to the size of the box rather than the size of the content when designing the page. It is precisely because of different browser resolutions that make CSS design difficult.

We often use this problem! Important to distinguish Firefox from ie6.0: program code # Content
{
Width: 414px! Important;
Width: 400px;
Padding: 5px;/* only one value is provided, indicating that the top-Right Bottom left margin is 5px */
Border-width: 2px;
}

Firefox identification! Important, while IE6 does not recognize, and! The width of important has a high priority. Therefore, FF is interpreted as width: 400px and ie6.0 as width: 414px, so that the display is the same.

But the problem lies in IE7 and ie7.0! Important has the ability to identify, but parsing the box model is the same as ie6.0, which causes a lot of trouble. That is to say ,! The important method is not applicable in ie7.0.

In general, the use of border is relatively small, and the border-width is generally small, so the main problem lies in the padding. Many people on the Internet have concluded that padding should be used as little as possible. If you can use margin, do not use padding. This statement is negative, and the solution to the problem should not always be avoided.

Solution to the box model problem:

Think about it,In fact, the problem lies in "simultaneous definition of width and padding/border-width "., This problem occurs in CSSCodeNote. After understanding this, it is difficult to think of the solution --

When the width of the child element is fixed, padding specifies

You only need to addWrapperLayer, split the original content layer into two layers,RespectivelyIn wrapper, define padding and border-width, and then define width: program code # wrapper {padding: 5px; border-width: 2px;} in content ;}

# Content {margin: 0px; width: 400px ;}

Program code <Div id = "wrapper">
<Div id = "content">
...
</Div>
</Div>

In this way, the problem can be solved. FF, ie6.0, and ie7.0 will all achieve the same display effect. More importantly, no CSS hack is used.

This solution is the final solution. The CSS hack method is only a temporary method in the current transitional phase.
For website construction, especially for websites with complex styles, we recommend that you add the wrapper layer to the important layer quickly.

For existing templates, you can modify some styles to define "width" and "padding or border-width", or use other methods.

Is it suitable for all browsers?
Theoretically, this method should be applicable to various browsers.
However, I think that unless a large website is compatible with FF, ie6.0, and ie7.0, it is mainly used for the three most popular browsers, with earlier ie versions, the feasibility of other browsers is to be verified.

PS: the wrapper layer is used in many areas on the small site, so no one is used in the CSS style sheet! Important.
This article is my personal opinion. You are welcome to correct and supplement it ~