Box-sizing and Min-* properties under IE 8

In non-IE browsers, by default, width the property refers to the width of the content area ( content ).
In IE 6+, if the browser is rendered in a standard model, the performance of non-IE browsers is consistent, and if the browser renders in quirks mode, it refers to the width of the width outer border.

Typically, when the page header is added <!DOCTYPE> , IE is rendered in standard mode (or near the standard), otherwise it is rendered in quirks mode.

Modern browsers, including IE8, support a property: box-sizing This property has two optional values: border-box | content-box , the normal element is by default content-box .
box-sizing: content-box;The attribute of the element refers to the width of the area of the width bounding rectangle, exactly the same as in IE quirks mode. As a result, reasonable use box-sizing: content-box; can be avoided in many cases, or add a new layer of additional elements.

For <input> elements, the box-sizing value is by default border-box . That is, in IE 8, Chrome and other browsers, you input specify how much width , it seems to be how wide. (unless you are width too narrow)

Max-width and Min-width will not say much.

There is a button in my form that usually requires a fixed width for aesthetics:

.button{    width: 260px;}

However, because the Web page needs to use multiple languages, some text may be very long, longer than the default length of the button, so change to the following style, when the text is too long, the button will automatically lengthen:

.button{    min-width: 260px;}

No problem in other browsers, the length of the button seems to be getting longer, as found in IE8 (IE 8 minimum). With Chrome and more, the black squares below are the same width as the buttons. and IE 8 under the button to be wider.

.button{  padding: 8px 20px;  min-width: 300px;}

What does the IE8 look like? If we set the button box-sizing , the content-box performance in Chrome is what IE8 looks like.

Therefore, if the width of the element in IE 8 is min-width determined, the browser ignores it directly box-sizing: border-box .

Box-sizing and Min-* properties under IE 8