选择未正确放置在Firefox中，在Chrome浏览器/ safari中工作

Question

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

是否有反正我可以隐藏下箭头图标，同时仍然有选择元素留在正确的地方？

例这里（用Firefox来看看发生了什么）：http://jsfiddle.net/Q2sqX/

非常感谢

Answer 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/

Answer 2

尝试把一个

vertical-align: middle; 

您div.styled规则