html – 神秘的CSS垂直空间

从这个简单的html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Hello</title>
  <style type="text/css" media="screen">
    .t1 {
      padding: 0px;
      margin: 0px;
    }
    .popup {
      display: inline-block;
      position: relative;
      width: 0px;
      padding: 0px;
      margin-left: -0.5em;
    }
    .hint {
      position: absolute;
      z-index: 1;
      width: 20em;
      background-color: white;
      border: 1px solid green;
      padding: 0.5em;
      margin-top: 1em;
    }
    .list {
      padding: 0px;
      padding-left: 1em;
      margin: 0px;
    }
  </style>
</head>

<body>

<!-- properly layout -->
<div style="height: 10em;">
  <span class="t1">MyObject o = www.mycompany.project.ObjectFactory.</span>
  <div class="popup">
    <div class="hint">
      <ul class="list">
        <li>NewSimpleObject(int x);</li>
        <li>NewComplexObject(int x, int y);</li>
        <li>NewComplicateObject(int x, int y, intz);</li>
      </ul>
    </div>
    <div>&nbsp;</div>  <!-- no idea why, but ending space is required for proper layout -->
  </div>
</div>

<!-- incorrect layout -->
<div style="height: 10em;">
  <span class="t1">MyObject o = www.mycompany.project.ObjectFactory.</span>  
  <!-- mysterious vertical space appear here -->
  <div class="popup">
    <div class="hint">
      <ul class="list">
        <li>NewSimpleObject(int x);</li>
        <li>NewComplexObject(int x, int y);</li>
        <li>NewComplicateObject(int x, int y, intz);</li>
      </ul>
    </div>
    <!-- <div>&nbsp;</div>  -->
  </div>
</div>

</body>

</html>

结果如下:

alt text http://img23.imageshack.us/img23/6224/resultrendering.png

浏览器的结果是相似的.所以我相信这不是一个浏览器错误.

第二次渲染中的文本行和弹出提示之间的垂直空间来自哪里?而< div>& nbsp;< / div>解决这个问题 ?

更新:

来自Richard M的回答.没有内容的框没有维度(Inline除外). < div>& nbsp;< / div>使“弹出式”维度存在.

根据Richard的说法,更好的解决方法是使用inline而不是inline-block.自the vertical dimension of inline is the same regardless of its content existence

由于某些原因,我还不了解,当切换到“内联”时,边缘顶部:1em不再需要

更新2:

OH NO ..这个问题还没有结束. Richard M建议(使用内联和删除margin-top)的更改仅适用于Webkit Browser(Chrome,Safari)在IE和Firefox上,弹出框对齐到左侧而不是文本行.

问题中的第一个样本(内嵌块和非空内容)现在可能是最可靠的选项.

更新3:

结论!这个问题的真正原因源于没有内容的非内嵌块没有维度. Richard M建议使用内联来避免这个问题.不幸的是,我发现这种解决方案在浏览器之间不一致.我反方向提出了另一个选项,使用通过height:1px的强制维度的内联块;这可以在任何浏览器中正常工作.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Hello</title>
  <style type="text/css" media="screen">
    .t1 {
      padding: 0;
      margin: 0;
      width: 0em;
    }
    .popup {
      display: inline-block;
      padding: 0;
      margin: 0; 
      position: relative;
      width: 0;
      height: 1px;  <!-- force vertical dimension -->
    }
    .hint {
      position: absolute;
      z-index: 1;
      padding: 0;
      margin: 0;
      margin-top: 1px;  <!-- compensate for the setup dimension -->
      width: auto;
      white-space: nowrap;
      background-color: white;
      border: 1px solid green;
    }
    .list {
      padding: 0;
      padding-left: 1em;
      margin: 0.5em;
    }
  </style>
</head>

<body>

  <!-- properly layout -->
  <div style="height: 10em;">
    <span class="t1">MyObject o = www.mycompany.project.ObjectFactory.</span><!-- 
      whitespace is not welcome
    --><div class="popup">
      <div class="hint">
        <ul class="list">
          <li>NewSimpleObject(int x);</li>
          <li>NewComplexObject(int x, int y);</li>
          <li>NewComplicateObject(int x, int y, int z);</li>
        </ul>
      </div>
    </div><!--
      whitespace is not welcome
    --><span>(1, 2, ...</span>
  </div>

</body>

</html>
您的.hint div具有1em的顶部边距,以将其“推”到文本行下方,但在第二个实例中,.popup div不包含任何内容(绝对定位的元素占用空间).没有内容的内嵌块div没有高度或宽度,并且位于文本行的基线上.所以,你是“推”的底线而不是顶部的线,因此额外的1em垂直空间.我真的不明白为什么你使用内嵌块,内联的工作也一样好,因为div的内容是绝对定位的.

响应您的问题编辑:使用显示内联,因为我建议应该工作,但您需要将您的绝对定位的.hint div的左上角和顶部值设置为零.此外,您需要移除< div>& nbsp;< / div>元素,否则你最终会发生一个换行符(因为它不是内联的).

翻译自:https://stackoverflow.com/questions/2311998/mysterious-css-vertical-space

转载注明原文:html – 神秘的CSS垂直空间