Problema float IE8 con CSS

Question

Sono sicuro che questo deve essere stato trattato in precedenza perché sono sicuro di non essere il primo a farlo, ma non riesco a trovare la risposta. Sto creando un effetto ombra per un <div> usando immagini di sfondo ripetute. Nei due angoli inferiori utilizzo piccole immagini di 9x5 px. Li galleggio a destra e sinistra e in Firefox e Safari sembrano perfetti. In IE8 (e forse in altri IE) galleggiano troppo a sinistra e a destra di circa 3px.

Puoi vedere il problema su qui. È un modello ebay per mia moglie.

Finora ho provato a impostare display: inline che era una soluzione per problemi di IE6 simili. Ho anche provato a impostare i margini dell'immagine e il riempimento su 0px senza fortuna.

Qualche idea?

Grazie, Carraig

Answer 1

Mentre sfogliavo la tua pagina ho scoperto che si sta impostando automaticamente sulla modalità stranezze, che è il problema probabile, perché se lo imposto in Strict sembra risolvere il tuo problema mobile in tutti i casi di IE.

leggi l'articolo di ppk qui: http://www.quirksmode.org/css/quirksmode.html

spiega perché sta accadendo e come risolverlo :)

Spero che sia d'aiuto!

Answer 2

Penso che abbia qualcosa a che fare con gli elementi float che escono dai bordi del div, prova a inserirlo prima di chiudere il div genitore:

<div style="clear: both; font-size: 1px; line-height: 0px;"> &nbsp;</div>