html - 使用 Safari 的 CSS 计算中缺少 2px

Question

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

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

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

16+8+8+1+1 = 34

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

34+1+1 = 36

某处缺少 2px。

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

p , input, div, body

还要注意在小提琴中我关闭了 CSS 规范化，因为我是手动进行的。

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

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

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

34+1+1 = 36 // 固定

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

我设置line-height: 1em了 for#po_but和width: 32pxfor #po_in，请参见此处的演示。高度现在都有 34px。

2 回答 2