Different nature reasons for input and select widths on different browsers

There is often a problem with form development, and input and select are the most commonly used two tags, but one problem is tricky. Input and select are two different and models, and if you simply set the width of both to the same, the following effect will appear:

<! DOCTYPE html>

And it is in all browsers, the following directly to see the box model layout in each browser will be at a glance;
Chrome:

Firefox
ie: (here ie to generational, IE8 before is a generation, IE9 after the generation, see figure)

These two tags are significantly different on different browsers, summarizing:
Model: Border + realwidth
ie9+->ie8-, Firefox, Chrome
Select
2*2 + 98-0*2 + 1*2 + 98 + 1*2 + 100 (102 100 100 102)
Input
2*2 + +-1*2 + 1*2 + 102--1*2 + 100 (104 102 102)
Either way, there will be more than 2px (ie8-seems to be 102, but the effect is more than 2px), this is enough to make Virgo crazy! I am not a Virgo, but in the course of practice is also crazy, not to explore the essence of the cause and solution is really unsettling, fortunately there is a solution! In fact, add an inner margin, all doubts will be solved.
The CSS width style of the Select, which contains the border and padding, that is: realwidth=css width.
The CSS width style of input does not include the border and inner spacing, realwidth=css width + border + padding.
the solution is as follows: ( just Chrome's layout, you can try it in each browser is a rule-based)
<! DOCTYPE html>

Summarize:
Set CSS width border for the select CSS width=input padding
Done perfectly!
 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
Different nature reasons for input and select widths on different browsers