Compatibility of select in various browsers
We know that the properties of the select tag in each browser are different from those supported by each browser, which leads to a different display of the select box in each browser.
The following describes how to create a select statement that is fully compatible with the main CSS attributes.
For select height, padding, line-height, a DEMO is written using the control variable method to test three conditions in each Browser: height.100.padding. 0, height. no. padding.100, no. height. no. padding. The result is shown in the following figure:
The following research attributes can be obtained:
Through the summary of the above research results, we know that IE6 is set to a fixed height of 22px regardless of the settings, and other browsers except safari support the height attribute, then we set the height: 22px. Now let's fix 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, set line-height: 18px when font-size is 12 PX, so that the select box height in safari is also 22px. In the end, the texts in FF and IE9 are not centered, and the padding: 2px0 is set for them. We found that FF and IE9 are both centered, but the select height of Each browser is not increased, if the height is set, the padding of a small number does not increase the overall height? After this setting, the select height in these browsers is 22px.
The following is an example of fully compatible code.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Htmlxmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
