Html 按钮上方无法解释的空间位于DIV内

前言：我读过很多关于一个div内的图像周围有一个奇怪的空间的文章，等等

示例#1:
示例2:
示例#3：

他们的问题似乎与我的相似，但并不完全相同。在此示例文档中，边框、填充、轮廓等设置为零。。然而，Opera和Firefox都在div的顶部渲染了一个多余的像素。第三个像素可能会在这个空间中作弊，但似乎没有人回答它为什么会出现

编辑：我读了很多文章，这些文章都非常接近于回答这个问题，但它们似乎都与实际问题略有不同

我错过了什么？这是我的第一个问题，所以请耐心点：）

愤怒
*{
游标：默认值；
保证金：0；
大纲：0；
边界：无；
填充：0；
文字装饰：无；
}
身体{
背景色：#87cefa；
}
div{
背景色：#ffffff；
}
钮扣{
边界半径：9px；
填充：1px6px 2px6px；
字体：14px单空格；
颜色：#ffffff；
背景色：#1e90ff；
}
样本按钮

是否有一些CSS3可以让一切正常工作？这是一个实验项目，因此最新的CSS3受到欢迎

---

PS:我只关心Opera渲染，不过Firefox最好支持相同的符合标准的代码。。谢谢

将div上的行高度更改为零

  div{
      background-color: #ffffff;
      line-height:0;
  }

---

将垂直对齐设置为按钮顶部。那会解决的。

谢谢！这就行了，有人知道规范中（我确实读过）在哪里指定了这种行为吗？行高与字体大小有关，字体大小在操作系统中可能会有所不同。您可以在上阅读更多内容，并看到默认的线高度约为1.2。因为您没有在CSS中指定任何字体规则，所以默认的行高被引入并将其重置为零，这是固定的。@Fumbles-css2.1规范部分和。但是它不容易阅读。@j08691我对这个修复程序的工作原理有点困惑，因为我第一次遇到这个问题的文档完全是通过DOM方法创建的。。（因此理论上DOM中不应该有空格）我们使用线条高度来固定我的理论中不应该存在的线条。如果可以的话，我会读更多的说明书。。感谢您帮助我了解发生了什么：）在我看来，垂直对齐的答案更好。啊哈，这也有效，是否有一些“修复”可以添加到我的样式重置中，用于所有元素，也可以解决这个问题？如果没有，那么我将在工作答案之间进行选择，并在我注意到这个问题的地方使用它：）我认为这更好，因为你不会弄乱div的线条高度（向div添加另一个内联元素，它看起来会很奇怪。为什么？它的线条高度将为0。你可以重写，但这确实是不必要的工作）。在我的重置样式表中，我相信我有一些类似于按钮、输入、文本区域{vertical align:top；/*以及其他东西*/}。我将发展我的答案，虽然解释为什么垂直对齐顶部工程，为什么你需要它放在首位。给我10分钟。太好了，我只是希望这种奇怪的行为从规范中消除，因为它似乎没有什么好处哈哈

  div{
      background-color: #ffffff;
      line-height:0;
  }