Select's best presets are fully compatible with all browsers select_HTML/Xhtml

We know that the attributes of the select tag in each browser and the support of each browser are somewhat different, which causes the select box to be displayed differently in each browser. Next, we will create a fully compatible select by supporting the main appearance CSS attributes. .
I used control variables to control the height, padding, and line-height of select and wrote a DEMO to test three situations on each browser: height.100.padding.0, height.no.padding.100, no.height.no.padding, the results are as shown in the link image of each browser DEMO appearance

We can get 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
Text vertically centered	T	T	T	F	F	T	T	T

Through the above summary of research results attributes, we know that IE6 has a fixed height of 22px no matter how it is set, while other browsers except Safari support the height attribute, so we set height:22px. So now we modify the safari browser, and we find that only safari supports the line-height attribute, so we can use line-height to correct its height to 22px, set line-height: 22px under the premise that the font-size is 12px, and finally The text in FF and IE9 is not centered. Set padding: 2px 0. We found that both FF and IE9 are centered, but the height of the select in each browser has not increased. So there is a bit of doubt here. In the height setting In case, the padding of a small number of numbers does not increase the overall height?
The following is a fully compatible code example.

Copy code

The code is as follows:

demo

Select's best presets are fully compatible with all browsers select_HTML/Xhtml_Web page production