Question

任何人都可以解释一下，为什么<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中阻止此类行为？提前谢谢。

Answer 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?

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

1 个答案: