select the best presets to create full compatibility with all browsersselect

We know that the properties of the select tag in each browser and the support of each browser are somewhat different, which causes the display of the select box in each browser to be different. Next, we will create a fully compatible select by supporting the main appearance CSS properties.
I wrote a DEMO for the select's height, padding, and line-height using the control variable method to test three situations on various browsers: height.100.padding.0, height.no.padding.100, no.height.no.padding. The results are shown in the linked images. The DEMO appearance of each browser

We can derive the following research properties.

	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 has a fixed height of 22px no matter how it is set, and other browsers except Safari support the height attribute, so we set height:22px. Now let's correct the Safari browser. We found that only Safari supports the line-height attribute, so we can use line-height to correct its height to 22px. Under the premise of font-size being 12px, we set line-height:22px. Finally, the text in FF and IE9 is not centered. We set padding:2px 0 for it. We found that FF and IE9 are centered, but the height of the selects in each browser has not increased. So here is a question. When the height is set, the padding of a small number does not increase the overall height?
The following is a fully compatible code example.

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>Demonstration Question 1</option>
<option>Demonstration Question 2</option>
<option>Demonstration Question 3</option>
<option>Demonstration Question 4</option>
<option>Demonstration Question 5</option>
</select>
</div>
</body>
</html>

<<: Using text shadow and element shadow effects in CSS

>>: How many times will multiple setStates in React be called?

Tomcat9 download, installation and configuration + detailed tutorial on integrating into eclipse

select the best presets to create full compatibility with all browsersselect

Tomcat9 download, installation and configuration + detailed tutorial on integrating into eclipse

Summarize the common properties of BigIn functions in JavaScript

How to monitor oracle database using zabbix agent2

Introduction to Linux environment variables and process address space

Summary of CJK (Chinese, Japanese, and Korean Unified Ideographs) Characters in Unicode

A brief discussion on how to customize the host file in Docker

Optimization methods when Mysql occupies too high CPU (must read)

Detailed explanation of the knowledge points of using TEXT/BLOB types in MySQL

mysql-5.7.28 installation tutorial in Linux

Vue implements student management function

Recommend

MySQL optimization query_cache_limit parameter description

Summary of some reasons why crontab scheduled tasks are not executed

Detailed explanation of the process of deleting the built-in version of Python in Linux

Introduction to Spark and comparison with Hadoop

How to run top command in batch mode

Docker online and offline installation and common command operations

Implementation of Docker building Maven+Tomcat basic image

How to install Docker on Windows 10 Home Edition

A brief discussion on Mysql specified order sorting query

How to install MySQL for beginners (proven effective)

Detailed steps to install web server using Apache httpd2.4.37 on centos8

Summary of seven sorting algorithms implemented in JavaScript (recommended!)

How to use video.js in vue to play m3u8 format videos

Ubuntu 16.04 image complete installation tutorial under VMware

Zookeeper request timeout problem in dubbo: configuration of mybatis+spring connecting to mysql8.0.15