Select the best default to create a fully compatible browser select

Time:2021-4-14

We know that the properties of the select tag in each browser and the support of each browser are different, resulting in different display of the select box in each browser. Next, we will create a fully compatible select by supporting the CSS properties of the main shapes.
I wrote a demo for the height, padding and line height of select by using the method of controlling variables, and tested three situations in each browser: height. 100. Padding. 0 height.no.padding .100、 no.height.no . padding, and the results are as follows: link pictures to each browserDemo appearance
 
We can draw 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

Center text vertically

T

T

T

F

F

T

T

T

Through the above research results attribute summary, we know that IE6 is set to a fixed height of 22px no matter what, and other browsers except Safari support the height attribute, so we set it height:22px . Now let’s modify Safari browser. We find that only Safari supports the line height attribute. Then we can use line height to modify its height to 22px and set the line size to 12px- height:22px Finally, if the text in FF and IE9 is not centered, set it padding:2px 0 , We find that FF and IE9 are both in the middle, but the height of the select of each browser has not increased. So there is a question here. In the case of height setting, does the padding of small numbers not increase the overall height?
Here is an example of fully compatible code.

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>demo</title>
<style>
*{padding:0; margin:0}
body{font-size:12px}
select{height:22px; line-height:18px; padding:2px 0}
</style>
</head>
<body>
<div style=”margin-top:20px; margin-left:20px; background:#000″>
<select>
< option > demo question 1
< option > demo question 2
< option > demo question 3
< option > demo question 4
< option > demo question 5
</select>
</div>
</body>
</html>