首页 > Web开发 > 详细

CSS - Select 标签在不同浏览器中的高度设置

时间:2016-01-05 15:13:57      阅读:296      评论:0      收藏:0      [点我收藏+]

当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题:

解决方法链接:http://stackoverflow.com/questions/20477823/select-html-element-with-height

Demo:http://jsfiddle.net/64px3yg5/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: 0;
    padding: 0;
}
@-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中的高度数值。

CSS - Select 标签在不同浏览器中的高度设置

原文:http://www.cnblogs.com/tx8899/p/5102135.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!