Question

前言：我已经阅读了很多关于div内部图像的文章，周围有一个奇怪的空间等等。

示例＃1：Unwanted padding-bottom of a div
示例＃2：https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
示例＃3：cannot eliminate space between 2 horizontal divs inside containing div

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

编辑：我读过很多很接近回答这个问题的文章，但它们与实际问题似乎有些不同。

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

<!doctype html>
<html>
  <head>
    <title>Anger</title>
    <style>
      *{
        cursor: default;
        margin: 0;
        outline: 0;
        border: none;
        padding: 0;
        text-decoration: none;
      }
      body{
        background-color: #87cefa;
      }
      div{
        background-color: #ffffff;
      }
      button{
        border-radius: 9px;
        padding: 1px 6px 2px 6px;
        font: 14px monospace;
        color: #ffffff;
        background-color: #1e90ff;
      }
    </style>
  <head>
  <body>
    <div>
      <button>Sample Button</button>
    </div>
  </body>
<html>

是否有一些CSS3可以使它全部工作？这是一个实验项目，欢迎使用最新的CSS3。

PS：我只关心Opera渲染，虽然Firefox会很好地支持相同的标准兼容代码..谢谢！

Answer 1

将div上的行高更改为零。

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

<强> jsFiddle example

Answer 2

将按钮垂直对齐设置为顶部。这将解决它。

DIV内BUTTON上方无法解释的空间

2 个答案: