从这个简单的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,intz);</li> </ul> </div> <!-- <div> </div> --> </div> </div> </body> </html>@H_403_4@结果如下： @H_403_4@alt text http://img23.imageshack.us/img23/6224/resultrendering.png @H_403_4@浏览器的结果是相似的.所以我相信这不是一个浏览器错误. @H_403_4@第二次渲染中的文本行和弹出提示之间的垂直空间来自哪里？而< div>& nbsp;< / div>解决这个问题 ？ @H_403_4@更新： @H_403_4@来自Richard M的回答.没有内容的框没有维度(Inline除外). < div>& nbsp;< / div>使“弹出式”维度存在. @H_403_4@根据Richard的说法,更好的解决方法是使用inline而不是inline-block.自the vertical dimension of inline is the same regardless of its content existence起 @H_403_4@由于某些原因,我还不了解,当切换到“内联”时,边缘顶部：1em不再需要 @H_403_4@更新2： @H_403_4@OH NO ..这个问题还没有结束. Richard M建议(使用内联和删除margin-top)的更改仅适用于Webkit Browser(Chrome,Safari)在IE和Firefox上,弹出框对齐到左侧而不是文本行. @H_403_4@问题中的第一个样本(内嵌块和非空内容)现在可能是最可靠的选项. @H_403_4@更新3： @H_403_4@结论！这个问题的真正原因源于没有内容的非内嵌块没有维度. 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 z);</li> </ul> </div> </div><!-- whitespace is not welcome --><span>(1,2,...</span> </div> </body> </html>
解决方法
您的.hint div具有1em的顶部边距,以将其“推”到文本行下方,但在第二个实例中,.popup div不包含任何内容(绝对定位的元素占用空间).没有内容的内嵌块div没有高度或宽度,并且位于文本行的基线上.所以,你是“推”的底线而不是顶部的线,因此额外的1em垂直空间.我真的不明白为什么你使用内嵌块,内联的工作也一样好,因为div的内容是绝对定位的.
@H_403_4@响应您的问题编辑：使用显示内联,因为我建议应该工作,但您需要将您的绝对定位的.hint div的左上角和顶部值设置为零.此外,您需要移除< div>& nbsp;< / div>元素,否则你最终会发生一个换行符(因为它不是内联的).
