How to use select to create fully compatible select of all browsers
This article focuses on "how to use select to create fully compatible browsers select", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use select to create a fully compatible browser select.
I wrote a DEMO for height, padding and line-height of select using the method of control variables to test three situations on each browser: height.100.padding.0, height.no.padding.100, and no.height.no.padding.
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 is vertically centered
T
T
T
F
F
T
T
T
Through the summary of the above research results, we know that no matter how IE6 is set to a fixed height of 22px, and other browsers except safari support the height attribute, then we set height:22px. So now we modify the safari browser, and we find that only safari supports the line-height attribute, then we can use line-height to modify its height to 22px, set line-height:22px on the premise that font-size is 12px, and finally, the text in FF and IE9 is not centered, and when we set it to padding:2px 0, we find that FF and IE9 are in the center, but the select height of each browser has not increased, so there is some doubt here. In the case of height setting, a small number of padding does not increase the overall height?
The following is a fully compatible code example.
Copy the code
The code is as follows:
Demo
* {padding:0; margin:0}
Body {font-size:12px}
Select {height:22px; line-height:18px; padding:2px 0}
Demo question one
Demo question 2
Demo question 3
Demo question 4
Demonstration question 5
At this point, I believe you have a deeper understanding of "how to use select to create a fully compatible browser select". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
