Question

我有一个表单，其提交输入按钮有一个背景图像，并在输入字段的顶部左移：

enter image description here

这适用于所有当前浏览器。我的问题是它还需要在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表单中使用button元素，则不同的浏览器将提交不同的值。 Internet Explorer将在和标签之间提交文本，而其他浏览器将提交value属性的内容。使用input元素以HTML格式创建按钮。

因此，这不适用于您所说的Web浏览器（IE + XP），因为该浏览器不支持它。您的代码没有问题。所以我想说就是这样，因为你的网站上没有很多用户在XP上运行Internet Explorer但是如果有很多用户那么你可能想在那里放一些文本。

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

在IE8中提交输入不可点击

2 个答案: