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的选择，它会看起来更加不同，您也无法在那里进行自定义。