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.
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?
Recommend
Detailed tutorial on deploying Apollo custom environment with docker-compose
Table of contents What is the Apollo Configuratio...
Detailed explanation of Nginx proxy_redirect usage
Today, I encountered a little problem when I was ...
How to start a Java program in docker
Create a simple Spring boot web project Use the i...
Solution to the problem of Windows Server 2008 r2 server automatically restarting for no reason
Windows Server 2008 server automatically restarts...
HTML table markup tutorial (40): Dark border color attribute of the header BORDERCOLORDARK
In the table header, you can define the dark bord...
Vue+element+springboot to implement file download progress bar display function example
Table of contents 1. Demand Background 2. Optimiz...
Three principles of efficient navigation design that web designers must know
Designing navigation for a website is like laying...
Detailed explanation of the integer data type tinyint in MySQL
Table of contents 1.1Tinyint Type Description 1.2...
CSS multi-column layout solution
1. Fixed width + adaptive Expected effect: fixed ...
Several common methods for passing additional parameters when submitting a form
When submitting a form, you may encounter situatio...
Solve the problem of missing msvcr100.dll file when building mysql in windows service 2012 Alibaba Cloud server
Solution-1: Download the msvcr100.dll file (find ...
Pure js to achieve the effect of carousel
This article shares the specific code of js to ac...
What does this.parentNode.parentNode (parent node of parent node) mean?
The parent node of the parent node, for example, t...
React Native startup process detailed analysis
Introduction: This article takes the sample proje...
JS implements simple calendar effect
This article shares the specific code of JS to ac...