2010-09-24 19 views
8

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.

+0

Verwenden Sie einen Doctype? –

+0

yup, nur nicht in diesem Beispiel. Doc-Typ os xhtml strict. – Mike

Antwort

19

Für inline-block ich normalerweise vertical-align:top angeben, um vertikale Ausrichtungsprobleme zu erleichtern. Und beachte, dass es horizontale Lücken zwischen den Geschwister-Divs mit Inline-Block gibt, die nur behoben werden können, indem der literale Whitespace im HTML-Code gelöscht wird.

Und ich hoffe, Sie verwenden einen Doctype.

Hoffe, das hilft, sonst bitte richten Sie eine JSFiddle, damit ich dies visuell sehen kann.

+0

hey, danke, ich gebe das eine Chance. RE der Leerraum, erzeuge ich die HTML Server Seite mit Google Closure Templates und das löscht alle Leerzeichen. – Mike

+0

hat sofort funktioniert =) – Mike

+0

Entschuldigung für die Exhumierung, aber ich habe nach 5 Jahren das gleiche Verhalten in Firefox und Chrome gefunden (https://jsfiddle.net/jhngc3uf/). Vielen Dank für die Problemumgehung, aber ich würde gerne verstehen, warum dieser Offset mit Überlauf versteckt passiert? Ist das normales Verhalten oder ein Fehler? –

Verwandte Themen