Из этого простого 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> & nbsp; </div> ?
ОБНОВЛЕНО:
Завершите ответ Ричарда М. Ящик без содержимого не имеет размерности (за исключением Inline). <div> & </div> создает "всплывающее" измерение.
Лучшим решением, по словам Ричарда, является использование inline вместо встроенного блока. Поскольку вертикальное измерение inline одинаково независимо от его содержания
По какой-то причине я еще не знаю, margin-top: 1em больше не требуется при переключении на "встроенный"
ОБНОВЛЕНО 2:
OH NO.. Этот вопрос еще не завершен. Изменение, которое предлагает Ричард М (использование 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>
