asp.net - IE8の入力でドロップダウンのimgの上に表示されるテキスト

Question

ドロップダウンのUIとして機能するドロップダウンの前に入力があります

<input type="text" value="" name=" " class="txtfield">
<asp:DropDownList runat="server" ID="ddAMT" SkinID="Form" DataSourceID="LDSAMT" DataTextField="xyz" DataValueField="ABC" Width="220px" CssClass="dd" AppendDataBoundItems="true" AutoPostBack="true" OnSelectedIndexChanged="index">
</asp:DropDownList>

.txtfield{
background: url("img.png") no-repeat scroll 98% center #fff;
position: absolute;
width: 175px;
border-radius: 4px;
padding-right:26px;
overflow:hidden;}

.dd{
background-position: left center;
height: 32px;
opacity: 0;    
filter: alpha(opacity = 0);
padding-left: 5px;
text-align: left;
width: 209px;
position : relative;
z-index : 10;
display:inline-block;}

私の問題は、IE8 では、ドロップダウン オプションのテキストがそれ以上の場合、テキストを表示するテキスト ボックスが完全な幅になるまで画像の上に表示されます。FF、Chrome で正常に動作します。つまり、img.png の前にテキストを非表示にします。