Solution to Box model bugs

Settlement Author: Atzie 2004-7-22 22:37:07

This article is from: css/examples/boxmodelhack.html ">tantek.com, you can also read" website refactoring "第225-235 page to learn more.

We define one of the most basic layers:

Boxtest

div.boxtest{border:20px   Solid #60A179;p adding:30px;background:  #ffc; width:300px;}
Standard case, the width of this box is: 20+30+300+30+20=400px.
But in the IE5.0 browser, there is a bug in the width of the box model that says 300px is the total width of the whole box, and the width of the content becomes: 300-20-30-20-30=200px.
To compensate for this bug, the trick is to add a IE5 "voice-family" of the sound attribute, and when you read this definition the browser stops reading and thinks it is 400px wide, but other compliant browsers continue to read and perform a second true value of 300px.
Content
div.content{border:20px solid #60A179; Padding:30px;background: #ffc; width:400px;voice-family:   "}\" "; Voice-family:inherit;width:  300px;}
Similarly, previous browsers in Opera7.0 have such parsing bugs. But we do not need to use pseudo value, there is a simpler way to solve this problem: Html>body     . Content {       width:300}