Home >Web Front-end >HTML Tutorial >Select's best presets are fully compatible with all browsers select_HTML/Xhtml_Web page production
Select's best presets are fully compatible with all browsers select_HTML/Xhtml_Web page production
- WBOYOriginal
- 2016-05-16 16:40:431302browse
We know that the attributes of the select tag in each browser and the support of each browser are somewhat different, which causes the select box to be displayed differently in each browser. Next, we will create a fully compatible select by supporting the main appearance CSS attributes. .
I used control variables to control the height, padding, and line-height of select and wrote a DEMO to test three situations on each browser: height.100.padding.0, height.no.padding.100, no.height.no.padding, the results are as shown in the link image of each browser DEMO appearance 
We can get 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 |
|
Text vertically centered |
T |
T |
T |
F |
F |
T |
T |
T |
Through the above summary of research results attributes, we know that IE6 has a fixed height of 22px no matter how it is set, while other browsers except Safari support the height attribute, so we set height:22px. So now we modify the safari browser, and we find that only safari supports the line-height attribute, so we can use line-height to correct its height to 22px, set line-height: 22px under the premise that the font-size is 12px, and finally The text in FF and IE9 is not centered. Set padding: 2px 0. We found that both FF and IE9 are centered, but the height of the select in each browser has not increased. So there is a bit of doubt here. In the height setting In case, the padding of a small number of numbers does not increase the overall height?
The following is a fully compatible code example.