IE box model and the box-sizing property in CSS3
- Standard box model – margin+border+padding+content
- IE box model – margin+content (IE5.5 and earlier)
In the IE box model, the width and height of the content include border and padding
When changing padding and border, the impact on layout
- Under the standard box model, changing the border and padding will change the width and height of the entire box.
- Under the IE box model, once the width and height are set, no matter how much the padding and border are changed, as long as the total width and height are within the tolerance range, the size will not change. Of course, if the value is too large, it will overflow.
If you put the box under the standard box model under the IE box model, it will disrupt the layout and lose the border and padding, because they are included in the width and height
If you need uniform standards, you can use the box-sizing property
box-sizing: content-box | border-box | inherit;
| attribute value | |
|---|---|
| content-box | Default properties, standard box model |
| border-box | Using the IE box model |
| inherit | Inherit the value of the box-sizing property of the parent class |
Browser Compatible
| browser | Support attribute names |
|---|---|
| Chrome/Opera/IE | box-sizing |
| FireFox | -moz-box-sizing |
| Safari | -webkit-box-sizing |