html - IE 中的按钮大小错误

Question

我开始了我的跨浏览器兼容性之旅(万岁)

我有一些按钮在 firefox 和 chrome 中工作正常，但在 IE 中它们似乎有更多的垂直填充。它们似乎只是 按钮，而不是带有一类按钮的 <input> 按钮。例如:

<input type="submit" class="button" name="check" value="Send">

工作正常，但是:

<button id="Del" class="button">Delete</button>

上面有很多额外的填充物

我希望我可以上传图片，但所有图片网站都被阻止了，但基本上按钮上的顶部和底部填充看起来大约 7 像素，而不是我在 CSS 中定义的 2 像素。只有特定输入类型的 CSS，所以我不确定发生了什么。

按钮类的 CSS:

.button {
-webkit-transition-duration: 0.4s; 
transition-duration: 0.4s;
background-color: #006099; /
width: 500px;
border: none;
color: white;
padding: 2px 2px 2px;
border-radius: 2px;
text-align: center;
text-decoration: none;
display: inline-block;
position: absolute;
right: 7px;
font-size: 16px;
}

任何输入类型的 CSS:

input[type=text] {
border: 2px solid #006099;
border-radius: 4px;
position: absolute;
right: 7px;
}
input[type=password] {
border: 2px solid #006099;
border-radius: 4px;
position: absolute;
right: 7px;
}

正如我所说，这些按钮在 Chrome 和 Firefox 中显示良好，但在 IE 上，垂直填充不正确。按钮类的其他元素如颜色和过渡都继承

有什么想法吗？

Answer 1

如果您想确保您的按钮在所有浏览器中具有相同的高度，您必须设置例如 height: 2.5em。我使用 ems 是因为您可以通过更改字体大小轻松放大或缩小按钮，例如 font-size: 1.25em。

Here是一个完整的例子。