The following is the case when my Blog page is browsing using Mozilla.
A mess, the left navigation bar covered the right content browsing area, and a picture (I used to make a border background), floating in the wrong location. Why does this have such a problem? The reason is that IE browser understands the understanding of CSS Box Model and the Mozilla understanding. Mozilla is created in accordance with the W3C recommended CSS standard, IE browser has an error to understand the Box Model, IE Browser's Box Model Thousands of web designers, developers learned, and have been using (original me too), the famous web design master ZELDMAN in his work "Designing With Web Standards" one chapter This issue is clarified. In a web page, the W3C's CSS is recommended to use a box to store web elements, and a standard CSS defined page is different box arrangements, nesting. The composition of a box is shown below:
CSS uses width and height to define the width and height of the content area using the Padding-Top, Padding-Bottom, Padding-LEFT, PADDING-RIGHT definition fill (Padding). Use Border-Top, Border-Bottom, Border-LEFT, Border-Right Define the upper and lower left and right widths of the border. Use margin-top, margin-bottom, margin-left, margin-right define the upper and lower values of the page blank.
But IE browser understands width, height, is understood to be width = content area width border-left border-right padding-left padding-rightheight = content height border-top border-bottom padding-top padding-bottom
Haha, you are also so understanding, many people think so, maybe W3C will cause ambiguity that will cause this word when the Width is defined.
Jessey's webpage has a more detailed article. http://jessey.net/simon/Articles/003.html
When Border and Padding are 0, this Box Model works fine, but if you define Border and Padding, correctly understand the Box Model's browser will conflict with the Box Model.
In my blog, the left navigation is a Div # LeftMenu, the right is Div # main, I defined the Div # LeftMenu's Border and Pandding, which only explained IE, so Mozilla could not follow you. Idea identification. This error of Box Model understands until IE6 is corrected, but IE6 is not compatible to keep down, not all pages use the correct Box Model computing method. Only when your web page is added to the full Doctype declaration, it can establish Box Model in accordance with the correct way.
In order to make the IE browser to use CSS Box Model, Tantek provides a Box Model Hack method, which can solve the IE4 / 5.x error box model, "Designing With Web Standards" also introduces this method. You can access it via http://www.tantek.com/css/examples/boxmodelhack.html. It is like this, specifying the following CSS declaration Div.content {Width: 400px; voice-family: inherit; width: 300px;} last width The value is the correct CSS box width, and the first Width is a CSS box width provided to IE4 / 5.x because IE4 / 5.x cannot identify two statements, so all the definitions later are give up. IE6 can also identify Voice-Family, but it can correctly understand Box Model, so use this method to ensure that these browsers are calculated in accordance with the correct Box Model. When I plan to use it to solve the IE Box model problem, I found that I use IE browser and I can't work according to my idea. I found the reason, because my IE6 browser, still used the wrong Box model calculation method, because the web page must be added with strict DOCTYPE declarations because of the correct Box Model computing. The page generated by 9CBS .Text Blog system has indeed a declaration of DOCTYPE, but this statement is incomplete. It lacks a description of the URI, thus forcing IE6 still uses a downward compatible error Box Model computing method. This is an incomplete DOCTYPE statement. If you plan to use CSS Box Model to resolve the Box Model problem, even if your IE version is 6.0, it will use the wrong Box Model.
Today, I finally found a way to replace the Box Model Hack method and role in IE6. Before introducing this method, first look at the CSS definition of my blog structure. Blog's navigation is a large Div # LeftMenu, the right side is div # main, the two DIV CSS declarations are defined as follows: #leftmenu {border-top-width: 0px; border-bottom-width: 0px; border-left- Width: 0px; border-right: # 645d64 35px solid; padding-top: 60px; padding-right: 4px; padding-kettom: 30px; padding-left: 4px; width: 200px;} #main {Padding-Right: 10px Padding-left: 10px; padding-bottom: 10px; padding-top: 10px; margin-left: 200px;} / * Some unnecessary properties in the definition of the two ID selectors, I have dropped * / I put # Left definition is changed to #leftmenu {border-top-width: 0px; border-bottom-width: 0px; border-limited: # 645d64 35px solid; padding-top: 60px; padding-right : 4px; Padding-bottom: 30px; padding-left: 4px; width: 157px; width: expression ('200px');} Expression This style definition is the properties that can be read after IE5, but only for IE, It can dynamically perform a script operation. Identifying the standard Box Model browser can only use a width definition in front, and the IE browser uses later Width to create a Box Model. Now it works fine.
If you intend to understand Box Model and CSS, the following resources are helpful.
Reference Resources: 1 / TR / CSS3-BOX /
2, "Box Model Hack" provided by Tantek, provides a solution to IE5.x Error Box Model http://www.tantek.com/css/examples/boxmodelhack.html
3, Jessey's website has IE Box Model and the correct Box Model comparison http://jessey.net/simon/articles/003.html
4, Hedong's website about CSS Box Model's brief introduction "CSS2.0 Box Model" http://hedong.3322.org/newblog/archives/000063.html
5, W3C CSS Specification "CSS1 Specification" http://www.w3.org/tr/CSS1 "Http://www.w3.org/tr/CSS21/" CSS3 Specification "http: // www .w3.org / style / CSS / CURRENT-WORK
