在为表单添加下拉菜单时,有时候对菜单的样式没有特别的要求,就是需要修改下select元素的宽度和高度,但众所周知select元素的样式很难修改;
select在各个浏览器,字体大小为14px时的高度为20px
希望是这样的,对边框样式也什么需求
但在IE7,IE8下的表现确实这样的
差别有点明显,遂在select上设置line-height怎么都没有用,查看各个浏览器(没有测试safari和opera浏览器)设置line-height:对select的高度都没有什么影响;
解决办法:
此方法不适用IE7及以下浏览器
为了select也浏览器中有统一的高度,只给select元素设置padding来增加高度,对字体大小有限制的可以合并使用padding, font-size;从而达到统一的高度;
Bootstrap 101 Template
总结:
对select高度有影响的CSS属性:height, padding, font-size, zoom