We know that the properties of the select tag in each browser and the support of each browser are different, which causes the select selection box to be displayed differently in each browser. Below, we create a fully compatible select through the support of the main appearance CSS attributes.
I used the method of controlling variables to write 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 follows: link pictures, the appearance of DEMO of each browser.
We can derive 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-mentioned summary of the research results attributes, we know that IE6 is set to be fixed at 22px and unchanged at any time, while other browsers except safari support the height attribute, so we set height:22px. So now let’s correct the safari browser. We found that only safari supports the line-height attribute, so you can use line-height to correct its height to 22px. When the font-size is 12px, line-height:22px is set. In the end, the text in FF and IE9 is not centered, and padding:2px 0 is set. We found that FF and IE9 are centered, but the height of the select of each browser has not increased. So there is a little doubt here, under the height setting, padding of a small number of numbers does not increase the overall height?
Below is a fully compatible code example.
Copy the code