Select compatibility issues in various browsers_html/css_WEB-ITnose

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.

Below we create a fully compatible selection by supporting the main CSS properties.

Written a DEMO using the control variable method to test the height, padding, and line-height of the select in three situations on each browser: height.100.padding.0, height.no.padding. 100. no.height.no.padding, the result is as shown in the following picture:

We can get the following research attributes

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. We find that only Safari supports the line-height attribute, so we can use line-height to correct its height to 22px, and set line-height: 18px under the premise that the font-size is 12px, so The height of the select box in Safari is also 22px. Finally, the text in FF and IE9 is not centered. We set padding: 2px0 for it. 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? After this setting, the height of the select in these browsers is 22px.

Below is a fully compatible code example.

Demo question one
Demo question two
Demo question three Demo question four
Demo question five

Reprinted from http://blog.csdn.net/liushuwei0224/article/details/8554995