从这个简单的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
结果在浏览器中类似.所以我相信这不是一个浏览器错误.
第二次渲染中文本行和弹出提示之间的垂直空间来自何处？那么<div> </ div>如何解决这个问题呢？
更新:
理查德M回答结论.没有内容的框没有维度(内联除外).所述<DIV>&NBSP; </ DIV>使"弹出"尺寸存在.
根据理查德的说法,更好的解决方案是使用内联而不是内联块.由于内联的垂直维度无论其内容是否存在都是相同的
由于某些原因我还不知道,当切换到"内联"时,不再需要margin-top:1em
更新2:
OH NO ..这个问题还没有结束.Richard M建议(使用inline和删除margin-top)的更改仅适用于Webkit浏览器(Chrome,Safari)在IE和Firefox上,popup框对齐左侧而不是文本行.
问题中的第一个样本(内联块和非空内容)可能是目前最可靠的选项.
更新3:
结论!这个问题的真正原因在于non-inline没有内容的块没有维度. 理查德M建议使用inline以避免这个问题.不幸的是,我发现这种解决方案在浏览器中不一致.我想出了另一个相反方向的选项,使用inline-block强制尺寸通过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>
您的.hintdiv 的上边距为 1em，可将其“推”到文本行下方，但是在您的第二个实例中，您的.popupdiv 不包含任何内容（因为绝对定位的元素不占用空间）。没有内容的内联块 div 没有高度或宽度，并且位于文本行的基线上。因此，您是“推”出线的底部而不是顶部，因此会产生额外的 1em 垂直空间。我真的不明白为什么你要使用内联块，鉴于 div 的内容是绝对定位的，内联也可以正常工作。
针对您的问题编辑：按照我的建议使用内联显示应该可以，但是您需要将绝对定位的.hintdiv 的左侧和顶部值设置为零。另外，您需要删除<div> </div>元素，否则最终会在出现的地方出现换行符（因为它不是内联的）。