使用 Safari 的 CSS 计算中缺少 2px答案

【问题标题】：Missing 2px in CSS calculations w/ Safari使用 Safari 的 CSS 计算中缺少 2px
【发布时间】：2012-07-19 21:26:09
【问题描述】：

我在这个小提琴中有一个与输入框很好地对齐的按钮（我现在在 Safari 中工作）

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

按钮高度 = 字体高度 + 上边距 + 下边距 + 上边距 + 下边距 =

16+8+8+1+1 = 34

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

34+1+1 = 36

某处缺少 2px。

请注意，我在最后进行规范化并规范化所有（我认为使用过的元素）。

p , input, div, body

还要注意我在 b.c. 关闭了 CSS 规范化。我手动完成。

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

现在我认为这是一个 hack b.c 我只是将我的高度更改了 2px 以解决丢失的像素...但我希望它以我理解的方式工作。

【问题讨论】：

【解决方案1】：

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

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

顺便说一句，您的代码在 mac 上的 safari/chrome 中看起来不错。

【讨论】：

【解决方案2】：

34+1+1 = 36 // 固定

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

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

【讨论】：