css - ドロップダウンが ie8 と ie9 で共通に見えない

Question

html:

<span align="left" class="section_span" >
<label for="gender">Gender</label><br />
<select id="gender" name="gender" class="select-input">
<option value="">Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select><br /><br />
</span>

CSS:

.select-input{
    width:180px;  
    padding:5px;
    font-family: "Helvetica-Light";
    font-size: 9pt;
    color:#2a2a2a;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -o-appearance: none;
    background: #ffffff url("../images/select-arrow.png") no-repeat;
    background-position:143px center;
    overflow:hidden;
}

  border-style:solid;
    border-width:thin; 
    border-color: #DDDDDD;
    margin-top:5px;
}

.section_span{
    width:190px;
    float:left;
    margin-top: 5px;
    margin-right:11px;
}

クロムとFFのスクリーンショットのようにドロップダウン矢印を取得しています（両方のサイド矢印を表示しています）。これを解決する。