8

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

示例 #1：不需要的 div 底部填充
示例 #2：https
://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps 示例 #3：无法消除包含 div 的 2 个水平 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 会很高兴支持相同的标准兼容代码.. 谢谢！

4

2 回答 2

7

将 div 上的 line-height 更改为零。

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

jsFiddle 示例

于 2012-07-15T18:39:57.590 回答
4

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

于 2012-07-15T18:42:44.733 回答