Question

这个总是让我烦恼

CSS

/* reset */
input,button { 
     margin:0;padding:0;border:0;
     font-family: inherit; font-size: inherit;
     line-height:1em; }

/* apply some style */
input,button { padding:.5em; }
input { background-color:#fff; }
button { background-color:#333; color:#fff; }

/* for display example */
body { padding:3em; font-size:2em; }
div { background-color:#ccc; padding:.5em }

标记

<div>
   <span><input type="text" value=" the input value "/></span>
   <span><button> A button</button></span>
</div>

因此， 给定足够的宽度和跨度，使inline显示...

为什么它们的高度不同？

以上代码为running here

解决方法一直如下：

1）指定一个高度 - 很好，如果使用ems更好，但真的???

2）包装元素（如示例中的div和span）并设置包装器样式（有效地为输入/按钮提供不同浏览器的空间）

希望我在旅行中错过了一段css。

此主题的大多数搜索发现都指向了解决方法

谢谢！

Answer 1

从按钮中移除line-height: 1em会将其修复为Chrome。对于Firefox，添加此修复程序：

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
    margin-top:0px; 
    margin-bottom: 0px; 
}

This jsfiddle适用于Chrome和Firefox。

Reference

Answer 2

有一个名为normalize.CSS的CSS脚本（可以在移动设备上链接）。更全面的重置版本。我建议链接到它而不是把它放在每个CSS文件中。尝试添加，我发现它给了我一致性。

链接已添加：http://necolas.github.io/normalize.css/

Answer 3

收到两个很棒的答案后，它是both

的组合

1）从 @Aphol 关于删除line-height或设置line-height:normal

2）来自 @indofraiser 使用包含::-moz-focus-inner

的normalize

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }

答案是两者的结合 - 工作和感觉很棒，因为在设置line-height：normal之后，firefox上仍然存在高度差（但它是最接近的）然后是{{ 1}}拖把它。

谢谢你们两位 - 这两个答案的最后一个组合就在这里 - http://jsfiddle.net/6xP5j/1/

再次感谢，再见了解决方法！大。

Answer 4

这是因为当您重置常见的浏览器默认值（如边距和填充）时，您继承了字体大小，并且按钮上的字体大小与输入字段的字体大小略有不同。

如果您在按钮中指定字体大小，输入{}样式，它们将立即变为完全相同的大小。

此外，“em”是相对的，即使你已经在元素上将它们设置为零，它们仍然被引用来计算“em”的相对值。

所以指定字体大小，如果你想要绝对值，不要使用ems，它会变成相同的大小。

虽然在某些情况下解决方法可能会更好。

Answer 5

<div class="wrap clearfix>
   <span class="inputfield"><input type="text" value=" the input value "/></span>
   <span class="btn><button> A button</button></span>
</div>


.wrap{
   width:100%;
}
span.btn{
  width: 40%;
}
span.inputfield{
  width: 60%;
  display: inline-flex;

}

用于统一表单输入高度的CSS

5 个答案: