在IE8中输入显示在下拉列表中的文本

Question

我在下拉列表中有一个输入，用作下拉列表的用户界面

<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中，如果下拉选项文本更多，那么将显示文本的文本框放在图像顶部直到完整宽度，它不应该发生，因为padding-right被赋予输入。它在FF，Chrome中工作正常，即它在img.png之前隐藏文本