我在这里的小提琴中有一个与输入框对齐的按钮(我现在正在Safari中工作)
http://jsfiddle.net/hNx6E/13/
但是,按钮的高度不等于输入的高度。这是我的计算。
按钮高度=字体高度+填充顶部+填充底部+边框顶部+边框底部=
16 + 8 + 8 + 1 + 1 = 34
输入高度=高度+边框顶部+边框底部=
34 + 1 + 1 = 36
在某些地方缺少2px。
请注意,在小提琴中,我在最后进行了归一化并归一化所有(我认为是二手元素)。
p , input, div, body
还请注意,在提琴中我已经关闭了b.c的CSS规范化。我手动完成。
Fiddle退出了响应,但是接下来我将尝试对其进行归一化以确定是否遗漏了我不知道的某些元素……现在……只是选中了左侧的normalize框,但这并没有改变任何内容。
现在我认为这是一个hack b.c,我只是将高度更改了2px,以解决像素丢失的问题...但是我希望它以我理解的方式工作。
最佳答案
34 + 1 + 1 = 36 //固定
什么?输入的宽度为34像素+ 2像素的边框,总共36像素。下一个问题是line-height
,这会增加按钮的高度。
我将line-height: 1em
设置为#po_but
,将width: 32px
设置为#po_in
,see demo here。现在两个高度都为34px。
关于html - 带Safari的CSS计算中缺少2px,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11582110/