nicht angemeldet
inline-block / inline IE6 + 7 Verschwindibus-Bug
Kurz und schmerzlos: http://bittersmann.de/articles/inline-block/
Einen Testcase kann ich leider nicht erstellen, da ich den Fehler abgespeckt nicht reproduzieren kann und die Originalseiten nicht herzeigen darf - aber dennoch hier die Info
Ich hatte folgendes Problem nun bereits zwei Mal: sobald man etwas inline-block (und für den alten IE mit inline) formatiert, verschwinden im IE sämtliche Elemente. Im ersten Fall stieg ich dafür einfach auf float um, weil es egal war - in diesem Fall müssen die Elemente aber zentriert sein. Float ist keine Option, text-align: center muss her.
HTML (stark vereinfacht) eine Liste mit Links:
<ul><li><a /></li><li><a /></li></ul>
inline-block liegt auf den a-Elemente, es spielt aber hierbei keine Rolle ob man das ganze auf die li-Elemente direkt verschiebt. Das ul-Element ist sichtbar, sämtliche li- und a-Elemente verschwinden aber und sind nicht mehr aufzufinden.
Lösung ist trivial: ein Zeichen (kein Whitespace) zwischen den Listencontainer und das erste Listenelement - z.B. ein geschütztes Leerzeichen.
<ul>x<li><a /></li><li><a /></li></ul>
Problem: die Sache ist dann nicht mehr valide.
Weitere Lösung ist, ein leeres Listenelement mit einem geschützen Leerzeichen darin einzufügen - inline-block muss dann aber auf den a-Elementen liegen - ist valide, aber nicht schön.
<ul><li> </li><li><a /></li><li><a /></li></ul>
-
Hi Suit,
HTML (stark vereinfacht) eine Liste mit Links:
<ul><li><a /></li><li><a /></li></ul>hm, ich sehe - zumindestens im Testaufbau - beim ie6 kein Problem, und das passiert beim ie6 nicht oft ;-) :
<!DOCTYPE html>
<html lang="de">
<head><style type="text/css">
ul {
text-align:center;
}
li {
display: inline-block;
}
* html li {
display: inline;
margin: 0 10px 0 10px;
}
</style>
</head>
<body>
<div id="main">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
<li><a href="#">link 5</a></li>
</ul>
</div>
</body>
</html>Gruesse, Joachim
--
Am Ende wird alles gut.-
hm, ich sehe - zumindestens im Testaufbau - beim ie6 kein Problem, und das passiert beim ie6 nicht oft ;-) :
Mit einem Testaufbau kann ich es auch nicht reproduzieren - das Problem tritt bei komplexeren Layouts auf, aber nur selten - idR. funktioniert inline-block problemlos, nur ein paar ausreißer sind dabei die sich damit fixen lassen.
Wie gesagt, ich kann es leider nicht herzeigen (NDA).
-
Hi,
Wie gesagt, ich kann es leider nicht herzeigen (NDA).
Dann musst Du leider alleine leiden. Aber im Geiste bin ich bei Dir ;-)
Gruesse, Joachim
--
Bitte frag nicht wieviele Sunden ich vergangene Woche mit ie6 verballert habe...
-
-
-
sobald man etwas inline-block (und für den alten IE mit inline) formatiert, verschwinden im IE sämtliche Elemente.
Korrigiert man solche Probleme nicht üblicherweise mit position:relative oder einem hasLayout auch für den Container? (Mein IE-6-Wissen ist eingerostet.)
Mathias
-
sobald man etwas inline-block (und für den alten IE mit inline) formatiert, verschwinden im IE sämtliche Elemente.
Korrigiert man solche Probleme nicht üblicherweise mit position:relative oder einem hasLayout auch für den Container? (Mein IE-6-Wissen ist eingerostet.)
Nein, hätte ich auch gedacht - hat nix geholfen.
positioniseverything hat bei ähnlichen probleme alles mögliche empfohlen. von height: 1% über zoom: 1, position: relative oder auch float: left für das umgebende Element. Nix gefruchtet.
-
positioniseverything hat bei ähnlichen probleme alles mögliche empfohlen. von height: 1% über zoom: 1, position: relative oder auch float: left für das umgebende Element. Nix gefruchtet.
height: 1% und zoom: 1 lösen lediglich hasLayout aus. Das kann nichts ändern, weil display: inline-block bereits hasLayout auslöst (so funktioniert der Trick im IE 6/7 überhaupt).
Wie steht es mit hasLayout für den Container? Und z-index-Anpassungen?
Mathias
-
(...) oder auch float: left für das umgebende Element. Nix gefruchtet.
Wie steht es mit hasLayout für den Container?Vergiss das – float: left ist ebenfalls ein hasLayout-Trigger, also hast du das schon probiert.
-
-
-
-
Ich hab mich jetzt für die "leeres Listenelement einfügen" entschieden, weil das Ding fertig werden muss. Danke euch beiden aber für die Hilfe.