The best presets of select are compatible with select_HTML/Xhtml _ web page creation in various browsers.

We know that the properties of the select tag in each browser are different from those supported by each browser, which leads to a different display in each browser, the following describes how to support the CSS attributes of the main shape to create a fully compatible select statement. For more information, see, as a result, the select selection box is displayed in different browsers. Next we will create a fully compatible select by supporting the CSS attributes of the main shape.
I wrote a DEMO for the select height, padding, and line-height using the control variable method to test three cases in different browsers: height.100.padding. 0, height. no. padding.100, no. height. no. padding. The result is shown in links to images in various browsers. DEMO appearance

We can obtain the following research attributes.

	Ie6	Ie7	Ie8	Ie9	Ff	Ch	Sf	Op
Default height	22px	22px			19px	20px	19px	19px
Height	F	T	T	T	T	T	F	T
Padding	F	F	T	T	T	T	F	T
Line-height	F	F	F	F	F	F	T	F
Vertical text Center	T	T	T	F	F	T	T	T

Through the summary of the above research results, we know that IE6 is set to a fixed height of 22px regardless of the settings, and other browsers except safari support the height attribute, then we set the height: 22px. Now let's fix the safari browser. We found that only safari supports the line-height attribute, so we can use line-height to correct its height to 22px, set line-height: 22px when font-size is 12 PX, and the text in FF and IE9 is not centered. Set padding: 2px 0, we found that FF and IE9 are both centered, but the select height of Each browser has not increased, so here is a bit of doubt, when the height is set, does the padding of a small number increase the overall height?
The following is an example of fully compatible code.

The Code is as follows:

Demo

Demonstration Question 1 Demonstration Question 2 Demonstration question 3 Demonstration question 4 Demonstration Question 5