Box-sizing value issues in input box and pure frame

When using the PURECSS framework, a problem is encountered. Input box, I gave them width and padding values, I found that in Firefox and Google found that increasing the padding value does not affect the final width, and under IE6 7 will affect the width.  It was later found that the pure framework set box-sizing for the input box (IE6 7 is not supported) and I have to set different widths respectively. Therefore, in the use of this framework, in order to unify, should be set Input[type=text] {box-sizing:content-box;-moz-box-sizing:content-box;}

Here is the information we found: Source: http://segmentfault.com/q/1010000000413229

Input text box What is the difference between using text-indent and Padding-left, and which is good?

Overall, text-indent does not affect the final width of the element but there is a compatibility issue, padding-left in the Chinese mainstream browser ie lower version of the final width, but in Chrome and Firefox does not affect the width, but the CSS reset can be used to solve the problem of multi-browser display, So that they eventually all affect the width.

text-indentand padding-left the basic difference:

• padding-leftBox-based model for elements at the inline and block levels
• text-indentBased on inline layout, applies only to block-level elements and acts as the inner first line of elements for the block hierarchy

Almost all of their performance distinctions are the difference between the two.

padding-leftinline框 block框 the left padding area that acts on or affects Content-box, and the text child nodes appear inside the Content-box, so all text moves to the left.

text-indentblock框the first line of text that will act on. Whether the text exceeds the width white-space of the container is truncated by the corresponding rule, or the carriage return in the text is retained by white-space the corresponding rules, resulting in the second row of the third row of the nth row appears, followed by the second row of the third row of the nth row will not be applied to the corresponding indent. text-indentThe purpose of this is to simulate the first line indentation effect in real-world typesetting requirements.

http://jsfiddle.net/humphry/3bSSX/

<input type="text">As a Inline-block-level label, it is a fixed single-line display (and is not the same as the white-space mechanism), the differences described above do not exist.

So where is the difference:

1. text-indent based on inline layout, causing Direction:rtl to be applied text-indent The provided indent appears on the right, and Padding-left is not affected by direction .
   Of course, direction This property is not commonly used in <input type= "text";

2. Padding-left based on the box model, so box-sizing properties and The Padding-left , width property together affect the final width of the element, while text-indent always does not affect the width of the element.
   This is important because the default style table for WebKit and Firefox sets the input element's Box-sizing:border-box If you set the width and padding-left at the same time, there will be a large width difference between the Webkit/firefox and the lower versions of IE.
   So when you use padding-left , you need to reset the corresponding styles for WebKit and Firefox:

input[type=text] { box-sizing : content-box; -moz-box-sizing : content-box; }

After resetting the style, in all browsers, the valid Padding-left is added to the final width of the element in all cases, as shown above Jsfiddle. This is something that needs extra consideration.

Box-sizing value issues in input box and pure frame