Von dieser einfachen 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>Hier ist das Ergebnis:
Alt-Text http://img23.imageshack.us/img23/6224/resultrendering.png
Das Ergebnis ist bei allen Browsern ähnlich. Ich glaube also, dass es sich nicht um einen Browserfehler handelt.
Woher kommt der vertikale Abstand zwischen der Textzeile und dem Popup-Hinweis im zweiten Rendering? Und wie kann der <div> </div> dieses Problem lösen?
AKTUALISIERT:
Schlussfolgerungen aus Richard M. Antwort. Ein Feld ohne Inhalt hat keine Dimension (mit Ausnahme von Inline ). Die Website <div> </div> die Dimension "Popup" existiert.
Die bessere Lösung, so Richard, ist die Verwendung von inline anstelle von inline-block. Da die vertikale Abmessung von inline ist unabhängig von ihrem Inhalt gleich
Aus irgendeinem Grund, den ich noch nicht kenne, ist die Rand oben: 1em ist nicht mehr erforderlich, wenn auf "inline" umgeschaltet wird
AKTUALISIERT 2:
OH NEIN.. Dieses Thema kann noch nicht abgeschlossen werden. Die Änderung, die Richard M. vorschlagen (verwenden inline und entfernen margin-top ) würde nur mit Webkit-Browsern (Chrome, Safari) funktionieren. Im IE und Firefox funktioniert die popup Box nicht an der Textzeile, sondern an der linken Seite ausrichten.
Das erste Beispiel in der Frage (inline-block & non-empty content) ist wahrscheinlich die zuverlässigste Option für jetzt.
AKTUALISIERT 3:
Schlussfolgerung! Die eigentliche Ursache für dieses Problem liegt in der Tatsache, dass non-inline Block ohne Inhalt hat keine Dimension. Richard M. empfehlen die Verwendung von inline um dieses Problem zu vermeiden. Leider habe ich festgestellt, dass diese Lösung nicht mit allen Browsern kompatibel ist. Ich habe eine andere Option in die entgegengesetzte Richtung gefunden, indem ich inline-block mit erzwungener Dimension über height: 1px; Dies funktioniert in jedem Browser korrekt.
<!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>
