在 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/）

我删除了您的浮动并添加了一个 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;
}

Answer 2

如果在 HTML 表单中使用按钮元素，不同的浏览器会提交不同的值。 Internet Explorer 将提交 and 标记之间的文本，而其他浏览器将提交 value 属性的内容。使用 input 元素在 HTML 表单中创建按钮。

因此，这在您所说的网络浏览器（IE + XP）中不起作用，因为该浏览器不支持它。你的代码没有问题。所以我会说，就这样吧，因为在 XP 上运行 Internet Explorer 的您网站的用户不会很多，但如果有很多，那么您可能希望在其中放置一些文本。

来源： this页面和this源上的第一个答案