从这个简单的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>
结果如下：
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 z);</li> </ul> </div> </div><!-- whitespace is not welcome --><span>(1,2,...</span> </div> </body> </html>
