падение вниз, не глядя распространены в 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 (показывать обе стороны стрелка). Но в ie8 и ie9 он показывает только стрелку вниз и не показывает стрелки вверх и вниз, как показано на хроме и FF. Как решить это .