为什么 Internet Explorer 以不同的方式呈现输入？ [关闭]

【问题标题】：Why Internet Explorer renders inputs differently? [closed]为什么 Internet Explorer 以不同的方式呈现输入？ [关闭]
【发布时间】：2014-07-30 12:13:54
【问题描述】：

谁能解释一下，为什么<input> 和<a> 在 Internet Explorer 9-11 中具有不同的高度（同时具有相同的字体、填充、边距和边框设置）？ Firefox 和 Chrome 以相同的高度呈现它们。

示例如下：

HTML

<input class="text" value="input"/>
<a class="text">button</a>

CSS

.text {
    font-family: 'Arial';
    padding: 7px;
    font-size: 12px;
    line-height: 1.4em;
    border: 1px solid black;
    display: block;
    float: left;
    width: 100px;
    margin: 0;
}

还有fiddle

有什么办法可以防止在 IE 中出现这种行为？提前谢谢你。

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

有一个与此类似的问题已经得到了很多答案和 18000 次浏览。我想你也会在那里找到解决方案

CSS - Exact same height and alignment of button and input text box

你也可以试着给它们一个高度：XYpx，这样你就可以确保它们总是有相同的高度。我想给他们一个高度也会对你以后的造型更好

我还发现了这个关于如何在不同浏览器中控制高度的问题

How can I control the height of text inputs and submit input buttons in different browsers?

【讨论】：

问题是，提供的示例说明了我目前遇到的问题的主要原因。这些元素位于不同的节点下，因此我不能将它们包装在公共元素中，也不能设置它们的高度，因为字体是动态的并且可能会发生变化。
这些框的高度不同的主要问题是垂直文本对齐，如果没有这个，它们都设置为相同的高度。 “输入”文本有一个垂直对齐中心，而“按钮”文本有一个不同的中心。所以当你使用 line-height 时，“input”会从中间改变高度，而“button”不会
看这里jsfiddle.net/n64gd/1有高度或这里jsfiddle.net/n64gd/4没有高度
谢谢 - line-height 解决了这个问题！