在Safari计算中缺少2px的Safari [英] Missing 2px in CSS calculations w/ Safari

问题描述

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

但是按钮的高度不会与输入的高度相加。这是我的计算。

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

16 + 8 + 8 + 1 + 1 = 34

输入高度 +边框底部=

34 + 1 + 1 = 36

/ p>

注意，在小提琴我做标准化结束和规范化所有（我认为用过的元素）。

  p，input，div，body 
  

我有CSS标准化关闭bc我手动。

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

现在我认为这是一个hack bc我刚刚改变了我的高度2px解释丢失的像素...但我希望它的工作方式我明白。

解决方案

34 + 1 + 1 = 36 //固定

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

我设置 line-height：1em for #po_but 和 width：32px $ c> #po_in ，请参阅这里的演示。现在的高度都有34像素。

I have a button nicely lined up with an input box in this fiddle here (I'm working in Safari right now )

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

However the height of the button does not add up to the height of the input. Here are my calculations.

Button Height = Font Height + Padding Top + Padding Bottom + Border Top + Border Bottom =

16+8+8+1+1 = 34

Input Height = Height + Border Top + Border Bottom =

34+1+1 = 36

There is a missing 2px some where.

Note in the fiddle I do my normalization at the end and normalize all ( I think used elements ).

p , input, div, body

Also note in the fiddle that I have CSS normalization turned off b.c. I do it manually.

Fiddle quit responding but next I was going to try their normalization to determine if I left off some element I am un-aware of...up now...just checked the normalize box on the left but this did not change anything.

Right now i consider this a hack b.c I just changed my height by 2px to account for the missing pixels...but I'd like it working in a way I understand.

解决方案

34+1+1 = 36 // fixed

What? Input's width is 34px + 2px for border, that's 36px total. The next problem is line-height, which increases height of the button.

I set line-height: 1em for #po_but and width: 32px for #po_in, see demo here. The heights now both have 34px.

这篇关于在Safari计算中缺少2px的Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！