【发布时间】：2010-02-22 15:42:39
【问题描述】：
来自这个简单的 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> </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> </div> -->
</div>
</div>
</body>
</html>
结果如下：
alt text http://img23.imageshack.us/img23/6224/resultrendering.png
跨浏览器的结果相似。所以我相信这不是浏览器错误。
第二次渲染中文本行和弹出提示之间的垂直空间来自哪里？而 又是如何解决这个问题的呢？
更新：
从 Richard M 的答案中得出结论。没有内容的框没有维度（Inline 除外）。 使“弹出”维度存在。
根据 Richard 的说法，更好的解决方案是使用 inline 而不是 inline-block。自the vertical dimension of inline is the same regardless of its content existence
由于某种我还不知道的原因，margin-top: 1em 在切换到“内联”时不再需要
更新 2：
哦不。。这个问题还不能结束。 Richard M 建议的更改（使用 inline 并删除 margin-top）仅适用于 Webkit 浏览器（Chrome、Safari） 在 IE 和 Firefox 上，popup 框向左对齐而不是比文本行。
问题中的第一个示例（内联块和非空内容）可能是目前最可靠的选择。
更新 3：
结论！这个问题的真正原因源于没有内容的non-inline 块没有维度。 Richard M 建议使用inline 来避免这个问题。不幸的是，我发现这个解决方案在浏览器中不一致。我想出了另一个相反方向的选项，通过height: 1px; 使用带有强制尺寸的inline-block 这在任何浏览器中都可以正常工作。
<!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>
【问题讨论】：