IE7中的输入类型=“图像”填充问题答案

【问题标题】：input type="image" padding issue in IE7IE7中的输入类型=“图像”填充问题
【发布时间】：2013-06-24 15:16:36
【问题描述】：

下面是我的 HTML 和 CSS。这适用于除 IE7 之外的所有浏览器。 width 和 height 是 button.gif 的维度。在所有其他浏览器上，图像被添加到输入字段并带有填充（以便按钮更宽，图像在中间）并且垂直对齐到父 div 的底部。这在 IE7 中不起作用。在 IE7 中，输入字段的总大小为 15px x 15px，并且完全忽略了填充。

<input class="input-button" type="image" src="../images/button.gif" />

.input-button {
width:15px;
height:15px;
background-color:#000;
border:none;
cursor:pointer;
padding:4px 20px 5px;
vertical-align:bottom;
}

【问题讨论】：

您的页面是否有有效的 DOCTYPE？否则，IE 会进入怪癖模式。我遇到了添加假边框border: 0px solid #FFFFFF; 的建议。我不知道这是否能解决您的问题，但认为值得一提。
@AndrewGibson 是的，你是对的。我错过了 DOCTYPE。感谢您指出了这一点。现在它似乎运作良好。我以为 HTML5 类型声明 <html> 不需要 DOCTYPE。无论如何现在都可以了。谢谢！
<html> 是开始的 html-tag，所有文档仍然需要一个 DOCTYPE 声明作为页面的第一行。很高兴它已排序；）

标签： html css internet-explorer-7

【解决方案1】：

在您的代码之前使用前缀“-ms-”并重新编写它们。在您的 .input-button 下添加 -ms-width:15px 等所有语句或您认为不适用于 ie 的语句。在您的情况下，您将只需要添加此语句

-ms-padding:4px 20px 5px;

【讨论】：