css - FF と Chrome: 選択したものが異なって見える理由がわかりません

Question

これはクロムでどのように見えるかです：

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 のパディングを変更して、テキストが適切に表示されるようにする必要があります。なぜこれが起こっているのかわかりません。クロムとFFがこれを行う方法に違いはありますか?