当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题:
解决方法链接:http://*.com/questions/20477823/select-html-element-with-height
Demo:http://jsfiddle.net/JSDavi/xzdpp9kf/1/
HTML:
<select>
<option>Here's one option</option>
<option>here's another option</option>
</select>
CSS:
@media screen and (-webkit-min-device-pixel-ratio:0) { /*safari and chrome*/
select {
height:30px;
line-height:30px;
background:#f4f4f4;
}
}
select::-moz-focus-inner { /*Remove button padding in FF*/
border:;
padding:;
}
@-moz-document url-prefix() { /* targets Firefox only */
select {
padding: 15px 0!important;
}
}
@media screen\0 { /* IE Hacks: targets IE 8, 9 and 10 */
select {
height:30px;
line-height:30px;
}
}
针对实际情况,手动调节css中的高度数值。