html - 在IE8中提交输入不可点击

Question

我有一个表单，它的提交输入按钮有一个背景图像并且向左移动到输入字段的顶部:

这适用于所有当前的浏览器。我的问题是它还需要在 Windows XP (!) 上的 IE8 中工作，但事实并非如此。当您将鼠标悬停在输入(放大镜)上时，指针不会改变，并且按钮不可点击。请问我哪里出错了？

HTML:

<form id="" action="" method="post">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</form>

CSS:

#search {
width:222px;
height:36px;
padding-left:223px;
padding-right:10px;
float:left;
}

input.searchsub {
width:23px;
height:23px;
float:left;
background-image:url(../images/magnifier.jpg);
margin:8px 0 0 -32px;
border:0;
cursor:pointer;
}

Answer 1

这是一个开始:(演示:http://jsfiddle.net/KYL3A/)

我删除了您的 float 并添加了一个 div 作为“边框包装器”。我认为这将使 IE8 发挥 :) 虽然我不能自己测试，因为我没有 IE8

<form id="" action="" method="post">
    <div id="searchwrap">    
        <label for="search">Search</label>
        <input type="text" id="search" name="search" value="" />
        <input type="submit" name="searchsub" class="searchsub" value="" />
    </div>
</form>

CSS

#searchwrap {
    display: inline-block;
    border: 1px solid #333;
    padding: 0 10px;
}
#search {
    width:150px;
    height:36px;
    border:0;
}

input.searchsub {
    width:23px;
    height:23px;
    background:red url();   // added red as i dont have your image
    margin:8px 0 0 0px;
    cursor:pointer;
}