当使用背景图像时，是否有解决方案来解决 IE 7/8 中在输入类型 = 提交上添加的额外填充？ IE 7/8 的其他奇怪之处？

Question

我一直试图找出在 IE 7/8 中的 input[type=submit] 上边框和背景图像之间的额外空间。看来如果我将背景更改为实际图像而不是仅使用颜色，IE 会添加这个额外的空间？

我发现的另一个奇怪之处是，如果您单击表单中的其中一个文本输入，它会在提交按钮周围添加 1px 黑色“轮廓”。

我在这里设置了一个演示页面 - http://bit.ly/i3XC1y

Answer 1

这是您问题的简单解决方案。只需在您的类中添加一行即可完成，我们来寻找解决方案：

.submit-btn{ 溢出：可见 }

访问 http://blog.10pixel.com/input -button-extra-width-in-ie-7-fix/ 了解更多详细信息。

Answer 2

我对此进行了更多研究，我发现最好的解决方案似乎在以下浏览器（IE6 - IE8、FF3.5 和 FF3.6、Chrome、Opera 和 Safari）中呈现输入非常相似，即包装我的提交用div输入。

下面是我使用的标记。

HTML

<form method="get" action="">
    <input name="text1" type="text" class="text-input" />
    <input name="text2" type="text" class="text-input"/>
    <div class="submit-btn"><input type="submit" name="submit" value="Submit" class="submit-input-wrapped" /></div>
</form>

CSS

div.submit-btn{
    border:1px solid #000;
    width:70px;
}

div.submit-btn .submit-input-wrapped{
    background:url(big-btn.jpg);
    border:none;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    height:30px;
    line-height:30px;
    margin:0px;
    padding:0px;
    text-indent:0px;
    width:70px;
}

div.submit-btn .submit-input-wrapped:hover{
    background-position:0px -23px;
}

就像我说的，这似乎效果最好，当另一个输入以与提交输入相同的形式聚焦时，它消除了 IE 中额外的空白填充和悬停轮廓。

我注意到的一件小事是文本的水平对齐方式。默认情况下，提交输入似乎将值文本居中，但我注意到 FF 和其他浏览器之间存在一些差异。它不是很明显，但是如果您在提交输入上将文本对齐设置为左侧，您会注意到左边框和 FF 中的值文本之间有一点填充。当文本对齐值设置为左时，所有其他浏览器的值文本与左边框齐平。