Html 带Safari的CSS计算中缺少2px

我这里有一个按钮和一个输入框很好地排列在一起（我现在在Safari工作）

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

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

16+8+8+1+1=34

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

34+1+1=36

有些地方少了一个2px

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

另外请注意，在小提琴中，我已经关闭了CSS规范化b.c.我是手动完成的

Fiddle停止响应，但下一步我将尝试它们的标准化，以确定是否遗漏了一些我不知道的元素…现在…只是选中了左侧的标准化框，但这并没有改变任何内容

---

现在我认为这是一个黑客BC，我只是把我的高度改变了2Px来解释丢失的像素……但是我希望它以我理解的方式工作。

< P>试着使用<代码>高度< /COD>和<代码>行高< /代码>，而不是<代码>上/下填充>代码>垂直对齐。所以你会得到这样的结果：

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

---

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

尝试使用

高度和
行高度来垂直对齐，而不是
顶部/底部填充。所以你会得到这样的结果：

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

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

34+1+1=36//固定

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

我将
的行高设置为1em，但将
的行宽设置为32px，将
的行高设置为1em，将
的行宽设置为32px。高度现在都是34px

34+1+1=36//固定

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

我将
的行高设置为1em，但将
的行宽设置为32px，将
的行高设置为1em，将
的行宽设置为32px。高度现在都是34px。
我还想添加一个重置css，如图所示：你是说POST按钮吗？在胜利之旅中，我觉得很好。18+8+8+1+1 = 36px@Hiro主角：你解决问题了吗？@Ana-看起来不错，但数字“不累加”@Cymbals-我需要了解这个2px是从哪里来的…不要添加一堆可能会改变输出的CSS，也不知道如何添加。我还会添加一个重置CSS，如图所示：你是在谈论POST按钮吗？在胜利之旅中，我觉得很好。18+8+8+1+1 = 36px@Hiro主角：你能解决这个问题吗？@Ana-看起来不错，但数字“相加不起来”@钹-我需要了解这个2px是从哪里来的…不要添加一堆可能会改变输出的CSS，也不知道如何。1em的像素是多少…也许这是一个问题…默认的线高度…顺便说一句，firefox是4px而不是safari那样的2px关闭。1em的像素是多少…也许这是一个问题…默认的线高度…由firefox是4px关闭，而不是像safari那样2px关闭。它看起来不错，但数字加起来不正确。它看起来不错，但数字加起来不正确。