(设置select高度为40px时在各浏览器中显示效果)
问题描述:
一、如果不用兼容IE6,7的话,直接设置select的padding值即可解决高度问题。以下是select标签在各浏览器中的默认高度,根据默认高度,设置padding为相应值,以使select达到所需高度。
(select默认高度)
二、如果要兼容IE6,7,那就需要使用另一种方案了(select需要被多嵌套两层标签,一层用来遮挡select的默认边框[在IE6、7中设置border:0px也是无效的,高版本可用],另一层用来模拟”高度改变后的“select边框):
<style type="text/css"> .standard_select{ /*边框*/ display:inline-block; border:solid 1px #E3E9EF; border-top-color:#ABADB3; padding:5px; /*调整此处改变select高度*/ } .select_shelter{ /*遮挡默认边框*/ display:inline-block; width:100px; *width:98px; height:20px; overflow:hidden; } .select_shelter select{ *margin:-2px; padding:1px; border:0px; width:100px; /*select的宽度*/ } </style> <span class="standard_select"><!--边框--> <span class="select_shelter"><!--遮挡默认边框--> <select> <option value="papername" selected="selected">SELECT选项标签</option> <option value="state">选项二</option> <option value="state">选项三</option> <option value="state">选项四</option> <option value="state">选项五</option> <option value="state">选项六</option> </select> </span> </span>
【参考】:select的最佳预设(reset)