CSS 输入字段样式魔法答案

【问题标题】：CSS input field styling magicCSS 输入字段样式魔法
【发布时间】：2025-12-23 22:40:12
【问题描述】：

我正在尝试以一致的方式设置输入字段和一些按钮的样式，但似乎有一些魔法正在发生。事件虽然输入具有与按钮完全相同的类，但它略高一些。占位符文本的垂直对齐方式也与输入的文本不同（高一个像素）。可以用跨浏览器解决吗？

编辑：正如 Jan Turoň 所指出的，行高解决了 Webkit 中的问题。现在，如果您在 Firefox 中检查 codepen，您会注意到该元素仍然具有 1px 边框。如何摆脱它？

谢谢，PS

HTML

<form action="">
  <a href=""class="btn">Button</a>
  <input type="text" class="btn" placeholder="input"/>
  <button class="btn">Login</button>
  <a href=""class="btn">Button</a>
</form>

CSS

.btn, input, button {

  display: inline-block;
  vertical-align: middle;
  line-height: 15px;
  font-size: 15px;
  font-family: sans-serif;

  border: 0;
  padding: 0;
  margin: 0;

  cursor: pointer;
  cursor: hand;

  text-decoration: none;
  color: #f2f2f2;
  background-color: #1a1a1a;
  padding: 7px 12px 8px 12px;
  margin-right: 1px;
  margin-bottom: 1px;

}

【问题讨论】：

将此 line-height 更改为 17px 解决了您的垂直间距问题，输入较大...可能还有另一种方法codepen.io/anon/pen/vbtJI
我不建议在表单元素上使用顶部和底部填充。相反，使用具有正确线高的绝对高度来获得所需的效果。这样，无论您浏览什么浏览器，它始终是相同的高度。

标签： css forms cross-browser

【解决方案1】：

line-height 不会将输入高度缩小到低于font-size 加上一些像素see the MDN info：

对于替换的内联元素，例如按钮或其他输入元素，line-height 无效。

只需删除line-height，即使不应用heightstyle，你也应该得到你想要的。将line-height 设置为 130% 似乎也有效。

【讨论】：

【解决方案2】：

我试图解决这个问题好几天了，但每个解决方案都不完整，并且不能在不同的浏览器中工作。

我发现这段代码可以完成工作：

float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;

我已经更新了 Codepen - http://codepen.io/anon/pen/pvqRwE

【讨论】：