Css FF vs Chrome：无法理解为什么我的选择看起来不同

这就是它在chrome中的外观：

这是FF中的外观：

这是我应用于此元素的css：

.styled-select5 {
    margin-left: 20px;
    height: 12px;
    border: 1px solid #cccccc;
    overflow: hidden;
    width: 104px;
    z-index: 1;
    background: url(/images/registration/triangle.png) no-repeat right white;
    display: block;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
    .styled-select5 select {
        padding-right: 42px;
        background: none repeat scroll 0 0 transparent;
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: .01px;
        text-overflow: '';
        border: none !important;
        width: 110% !important;
        overflow: hidden;
        z-index: 5;
        height: 14px;
        display: block;
        padding-left: 3px;}
    .styled-select5 select::-ms-expand{
       display: none;}
        .styled-select5 select option {
            height: 20px;
            width: 400px; }
    .styled-select5.hidden {
        display: none; }

我一直想弄明白这一点有一段时间了。为了使它们看起来相似，我必须更改FF中的填充以使文本正确显示。我不知道为什么会这样。chrome和FF在这方面有什么不同吗？

每个浏览器（在每个操作系统上）都以不同的方式显示HTML元素。可以覆盖默认设置的样式数量也由浏览器决定。

---

您不能超出允许的范围进行编辑。如果您碰巧在Safari中使用了selects，那么它看起来会有很大的不同，并且您也无法对其进行定制

你试过设置

行高吗？

？我不认为这与文本被截断有任何关系。我不认为你在问题中解释了这个问题，这就是为什么我认为你想要中间的文本。关于你编写的代码问题的问题必须描述具体的问题-并包括有效的代码来复制它-在问题本身。请参阅以获取指导。