Из этого простого 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>
Вот результат:
альтернативный текст http://img23.imageshack.us/img23/6224/resultrendering.png
Результат одинаков для всех браузеров. Поэтому я считаю, что это не ошибка браузера.
Откуда берется вертикальное пространство между текстовой строкой и всплывающей подсказкой во втором рендеринге? И как & nbsp; может решить эту проблему?
ОБНОВЛЕНИЕ:
Заключение из Ричард М ответ. Ящик без содержимого не имеет размера (за исключением Inline ). & nbsp; делает "всплывающее" измерение существующим.
Лучшее решение, по мнению Ричарда, это использовать inline вместо inline-block. Поскольку вертикальный размер inline одинаков, независимо от наличия его содержимого
По какой-то причине я пока не знаю, margin-top: 1em больше не требуется при переключении на «inline»
ОБНОВЛЕНО 2:
ОН НЕТ .. Этот вопрос еще не решен. Изменение, предлагаемое Richard M (используйте inline и удалите margin-top), будет работать только с браузером Webkit (Chrome, Safari). В IE и Firefox поле popup выравнивается по левому краю, а не к текстовой строке.
Первый пример в вопросе (встроенный блок и непустой контент), вероятно, является наиболее надежным вариантом на данный момент.
ОБНОВЛЕНО 3:
Вывод! Истинная причина этой проблемы связана с тем, что блок non-inline без содержимого не имеет измерения. Ричард М предлагает использовать 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>