选择在 Firefox 中未正确定位，可在 chrome/safari 中使用答案

【问题标题】：Select not positioned properly in firefox, works in chrome/safari选择在 Firefox 中未正确定位，可在 chrome/safari 中使用
【发布时间】：2013-05-27 22:11:38
【问题描述】：

由于某种原因，当我的自定义样式选择输入放置在文本输入旁边时，我的自定义样式选择输入在 Firefox（适用于 Chrome/Safari）中被向上推。如果我删除 .styled div 上的 overflow:hidden，则选择输入会弹回正确的位置，但具有默认的向下箭头图标。

无论如何我可以隐藏向下箭头图标，同时仍然让选择元素保持在正确的位置？

此处的示例（使用 firefox 查看发生了什么）：http://jsfiddle.net/Q2sqX/

非常感谢

【问题讨论】：

标签： html css firefox

【解决方案1】：

将样式中的vertical-align属性设置为middle。

div.styled { 
    vertical-align: middle; /* Add this */
    display: inline-block;
    overflow:hidden; /* this hides the select's drop button */
    padding:0; 
    margin:0; 
    background: white url(http://www.onextrapixel.com/examples/pure-css-custom-form-elements/formelements-select.png) no-repeat right;
    /* this is the new drop button, in image form */
    width:12em; border-radius:2px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); 
    border: solid 1px #ccc; 
}

工作示例： http://jsfiddle.net/Q2sqX/5/

【讨论】：

【解决方案2】：

试着放一个

vertical-align: middle;

在你的 div.styled 规则中

【讨论】：