Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.