Question

我开始跨浏览器兼容性的旅程（万岁）

我有很多按钮可以在firefox和chrome中正常工作但是在IE中它们似乎有更多的垂直填充。他们似乎只是＆lt;按钮＆gt;按钮，而不是＆lt;按钮。输入＆gt;用一类按钮。例如：

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

工作正常，但是：

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

上面有一堆额外的填充

我希望我可以上传图片，但所有图像网站都被禁止在这里，但基本上按钮上的顶部和底部填充看起来大约是7px而不是我在CSS中定义的2px。特定输入类型只有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就是一个完整的例子。

IE中的按钮大小错误

1 个答案: