Yahoo! User Interface Blog (YUIBlog)

CSS Quick Tip: Come prevenire una "goccia float" in IE6

Anche se questo comportamento è spesso chiamato un " goccia float "o un" float drop ", la colonna che scende non deve essere un float ... deve solo essere più ampio lo spazio allocato per questo. Si noti che questo è spec ed è un comportamento comune tra i vari browser, se una colonna è "troppo larga", quindi lascerà cadere.

Ciò che rende IE 6 stand fuori è che questo browser non supporta completamente l' width della proprietà (né height per quella materia). Quindi, lascia crescere i contenitori per accogliere il loro contenuto. E 'questa crescita che crea la goccia, perché la casella non può essere contenuto nel suo spazio progettato.

Di solito, i colpevoli sono elementi che non si avvolgono (es. immagini, URL, ecc), ma lo stile dei caratteri (ad esempio, IE e corsivo ) può essere responsabile anche.

Ad esempio, per far cadere sulla colonna di destra YUIBlog in IE 6, tutto quello che dovevo fare è di stile una delle immagini sul binario giusto con una larghezza superiore a 210 pixel. Tale immagine costringe IE 6 per aumentare la larghezza della colonna destra, che quindi non può più adatta accanto alla colonna di sinistra.

Le solite correzioni:

word-wrap: break-word;

Impacco Strings rompendo sul bordo destro della casella.

wbr con wbr:after {content:"\00200B"} per Opera

Il wbr elemento rappresenta un'opportunità di interruzione di riga. Inserimento wbr s stringhe lunghe all'interno del browser permette di aggiungere una interruzione di linea, se necessario.

overflow-x:hidden;

Qualsiasi contenuto più ampio del contenitore è cut-off sul bordo destro della finestra di detto.

Si noti che le due prime soluzioni funzionano solo su stringhe e non impedire che le immagini, ecc espanda il box.

Quando i fix noti non riescono a breve

Poche settimane fa, mi fu chiesto di fissare un "drop galleggiante" su una delle pagine di Yahoo! Finanza. In browser moderni, una lunga serie è stato conficcato nella guida a destra (screenshot), ma in IE 6, che la stessa stringa fatto la goccia colonna di destra sotto la piega (screenshot). Purtroppo, che il contenuto veniva da un provider, in modo da modificare il markup non era un'opzione.

A causa della natura della corda, che era un elenco separato da virgole dei simboli, le correzioni di cui sopra non sono stati soddisfacenti. Ultime tale elenco in un luogo arbitrario era meglio tagliarla, ma non ancora una soluzione praticabile ...

Fare IE 6 si comportano come i grandi ragazzi

Il trucco per rendere IE 6 si comportano come tutti i moderni browser là fuori è lo stile la scatola con un margine negativo di destra (più position:relative ).

Demo

Senza la correzione

Screenshot per coloro che non vedono questa pagina in IE 6.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis Viverra. Curabitur luctus, NIBH ac ultrices rhoncus, dui turpis MAURIS Mattis, quis pharetra orci odio vitae risus. Nunc ultricies Gravida facilisis.

Curabitur luctus, quis Orci vitae risus.

Con la correzione

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mollis facilisis Viverra. Curabitur luctus, NIBH ac ultrices rhoncus, dui turpis MAURIS Mattis, quis pharetra orci odio vitae risus. Nunc ultricies Gravida facilisis.

Curabitur luctus, quis Orci vitae risus.

.fixMe { margin-right:-100px; position:relative; }
.fixMe { margin-right:-100px; position:relative; } 

Il margine negativo può essere di qualsiasi valore purché questo valore è maggiore del delta tra la larghezza assegnato e la larghezza effettiva della scatola espansa. E 'questa dichiarazione che impedisce il galleggiante goccia. Lo scopo di position:relative è quello di rendere IE mostrare il contenuto al di fuori dei confini del contenitore padre.

Perché mi piace elementi di stile la stessa su tutta la linea, io di solito non sandbox questa regola.

Le cose da considerare

Questo hack mantiene la colonna al suo posto, ma non impedisce di ottenere che il contenitore più ampio. Ciò significa che non è possibile lo stile l'elemento con uno sfondo o un bordo perché sarebbero dipinta all'esterno della confezione. Ecco uno screenshot di quello sfondo e il bordo simile a quando applicato in combinazione con questa tecnica in IE 6:

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!