下拉不能在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; 
} 

我得到的下拉箭頭，就像在Chrome和FF的屏幕截圖（顯示兩側箭頭）。但在ie8和ie9中，它只顯示向下箭頭，並且不顯示向上和向下箭頭，如chrome和FF所示。如何解決此問題。