css - FF vs Chrome：无法弄清楚为什么我的选择看起来不同

Question

这是它在 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这样做的方式有什么不同吗？

Answer 1

每个浏览器（在每个操作系统上）都以不同的方式显示 HTML 元素。可以覆盖默认值的样式数量也由浏览器决定。您不能在允许的范围之外进行编辑。如果您碰巧使用了 Safari 的选择，它看起来会大不相同，您也不能在那里自定义太多。