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?

Database backup in docker environment (postgresql, mysql) example code

select the best presets to create full compatibility with all browsersselect

Database backup in docker environment (postgresql, mysql) example code

JavaScript canvas to achieve code rain effect

Vue project code splitting solution

How to use Vue3 to achieve a magnifying glass effect example

Detailed introduction to logs in Linux system

Introduction to the process of using NFS remote directory mounting in CentOS environment

Docker executes a command in a container outside the container

jQuery manipulates cookies

Detailed explanation of the significance of standard commit msg in JavaScript development

Detailed explanation of importing/exporting MySQL data in Docker container

Recommend

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

SQL implementation LeetCode (185. Top three highest salaries in the department)

A brief analysis of the responsiveness principle and differences of Vue2.0/3.0

Detailed explanation of common methods of JavaScript String

Problems and solutions encountered when using v-model to two-way bind the values of parent-child components in Vue

50 lines of code to implement Webpack component usage statistics

How to implement the singleton pattern in Javascript

Centos7.5 installs mysql5.7.24 binary package deployment

Three Ways to Find the Longest Word in a String in JavaScript (Recommended)

The latest version of MySQL 8.0.22 download and installation super detailed tutorial (Windows 64 bit)

Compilation process analysis of Remax framework for writing small programs using React (recommended)

Vue implements a search box with a magnifying glass

How to use html2canvas to convert HTML code into images

Issues with using Azure Container Registry to store images

How to build a React project with Vite