問題:
在為表單添加下拉菜單時,有時候對菜單的樣式沒有特別的要求,就是需要修改下select元素的寬度和高度,但眾所周知select元素的樣式很難修改;
select在各個瀏覽器,字體大小為14px時的高度為20px
希望是這樣的,對邊框樣式也什么需求
但在IE7,IE8下的表現確實這樣的
差別有點明顯,遂在select上設置line-height怎么都沒有用,查看各個瀏覽器(沒有測試safari和opera瀏覽器)設置line-height:對select的高度都沒有什么影響;
解決辦法:
此方法不適用IE7及以下瀏覽器
為了select也瀏覽器中有統一的高度,只給select元素設置padding來增加高度,對字體大小有限制的可以合並使用padding, font-size;從而達到統一的高度;
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>Bootstrap 101 Template</title> <style> select{width:200px; padding:20px 0; *height:60px/*為IE7設置高度*/} </style> </head> <body> <form> <select> <option value="0">人民幣</option> <option value="0">美元</option> <option value="0">越南盾</option> <option value="0">法郎</option> </select> </form> </body> </html>
總結:
對select高度有影響的CSS屬性:height, padding, font-size, zoom