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

Question

我在这里的 fiddle 中有一个按钮与输入框很好地对齐(我现在正在 Safari 中工作)

http://jsfiddle.net/hNx6E/13/

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

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

16+8+8+1+1 = 34

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

34+1+1 = 36

某处缺少 2px。

请注意，在 fiddle 中，我在最后进行标准化并标准化所有元素(我认为使用过的元素)。

p , input, div, body

另请注意，在 fiddle 中我关闭了 CSS 规范化。我手动完成。

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

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

Answer 1

34+1+1 = 36 // fixed

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

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