Question

我有一个按钮，在这个小提琴里排列着一个输入框（我现在在Safari工作）

然而，按钮的高度并不等于输入的高度。这是我的计算。

按钮高度 =字体高度+填充顶部+填充底部+边框顶部+边框底部=

16 + 8 + 8 + 1 + 1 = 34

输入高度 =高度+边框顶部+边框底部=

34 + 1 + 1 = 36

在某些地方缺少2px。

请注意，在小提琴中我会在最后进行标准化并将所有标准化（我认为使用过的元素）。

p , input, div, body

另请注意，我在CSS规范化中关闭了b.c.我是手动完成的。

小提琴退出响应，但接下来我将尝试他们的规范化，以确定我是否遗漏了一些我不知道的元素......现在......刚刚检查左侧的标准化框但是这没有改变任何东西。

现在我认为这是一个黑客b.c我只是将我的身高改为2px来解释丢失的像素...但我希望它以我理解的方式工作。

Answer 1

尝试使用height和line-height代替top/bottom padding来垂直对齐。所以你会得到类似的东西：

#po_but {
  height: 34px;
  line-height: 34px;
  padding: 0 6px;
}

BTW你的代码在safari / chrome上看起来很好。

Answer 2

34 + 1 + 1 = 36 //固定

什么？边框的输入宽度为34px + 2px，总共为36px。下一个问题是line-height，它会增加按钮的高度。

我为line-height: 1em设置#po_but，为width: 32px设置#po_in，see demo here。现在的高度都是34px。