Ich habe ein Layout, das in Webkit-basierten Browsern einwandfrei funktioniert aber im Internet Explorer und Firefox die vertikale Ausrichtung ist ausgeschaltet. Das einfachste Beispiel des Codes ist:Überlauf: versteckt; Ursache Alignment-Probleme in Firefox
<html>
<head>
<style>
body {
padding: 20px;
background-color: #c0c0c0 ;
}
#wrapper {
border: 4px solid #9cf ;
}
#wrapper > div {
display: inline-block ;
height: 30px ;
line-height: 30px ;
}
#content1 {
width: 100px ;
background-color: yellow ;
}
#content2 {
width: 325px ;
overflow: hidden ;
white-space: nowrap ;
background-color: blue ;
}
#content3 {
width: 400px ;
background-color: red ;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content1">Content 1</div>
<div id="content2">A rather long string which will become truncated and cause the vertical alignment issue</div>
<div id="content3">Another piece of content</div>
</div>
</body>
</html>Sie werden sehen, dass die # content2 div relativ zu der # content1 und # Inhalt3 divs nach oben gedrückt wird. Ich habe einen relativ starken Grund, die Inline-Blöcke über Floats in dieser Situation zu verwenden, aber wenn die einzige "Lösung" darin besteht, in Floats zu wechseln, muss ich damit weitermachen, aber ich würde es lieber vermeiden, wenn möglich, da derzeit die Zeit für unseren Pilotversuch kurz ist, auf lange Sicht könnte das Layout auf Floats umgestellt werden.
Weiterhin habe ich versucht, mit Margen und Paddings zu versauen, ohne Erfolg. In diesem Chaos habe ich festgestellt, dass es das Vorhandensein von Überlauf ist: versteckt in # content2, das diese linienbrechende Verzerrung verursacht.
Jede Hilfe sehr geschätzt.
Verwenden Sie einen Doctype? –
yup, nur nicht in diesem Beispiel. Doc-Typ os xhtml strict. – Mike