CSS: Strani bug su IE

Pubblicato da Davide, Aggiornato mercoledì 2 luglio 2008 3 Commenti »

Questo articolo e' stato scritto piu' di 6 mesi fa.. In teoria non cambia nulla, sed panta rei: se trovi link o informazioni datate segnalalo pure. :)

Negli ultimi tempi sto lavorando a pieno ritmo sui fogli di stile CSS. Ho colto l’occasione per apportare anche qualche piccola miglioria a diploD e mentre facevo ciò ho notato alcuni strani bug. Non ho approfondito le mie ricerche quindi non posso essere certo che questi problemi siano sconosciuti, resta il fatto che sono perlomeno “particolari”. Andiamo ad analizzarli.

Margini mangiati

Il problema è davvero particolare. Consideriamo un box con il seguente codice css:

blockquote {
margin: 15px 30px 0 10px;
padding: 2px 6px 2px 20px;
border-left: 5px solid #F8BF24;
background: #FFF6D9 url('images/quote.gif') no-repeat top left;
}

Su Firefox e Opera nessun problema, su Internet Explorer invece l’immagine di sfondo allineata a sinistra va in conflitto con il margine sinistro e si sovrappone ad esso. Tutto ciò che sta sotto al box viene poi spostato verso sinistra di qualche pixel, e finisce nascosto dietro al box esterno che lo contiene. L’effetto è a cascata: ovvero se sotto ci sarà un altro box di tipo blockquote, tutto ciò che viene dopo subisce uno spostamento verso sinistra ancora maggiore. La faccenda è ancora più strana se pensiamo che passando il mouse sopra a un link, l’allineamento delle righe prossime al link torna normale, mentre le righe sottostanti restano allineate male. Il bug si coglie bene da questi screenshot.

bug css
bug css
bug css
bug css

Il bug è stato corretto semplicemente mettendo l’immagine di sfondo a destra. Con l’immagine allineata in questo modo il problema non si manifesta più. Il nuovo codice del box risulta essere:

blockquote {
margin: 5px;
padding: 2px 26px 2px 6px;
border: 1px solid #f3dc9e;
border-left: 4px solid #F8BF24;
background: #FFF6D9 url('images/quote.gif') no-repeat top right;
overflow: auto;
}

Immagine di sfondo mangiata

Su IE (Microsoft Internet Explorer) se abbiamo a che fare con un box sul quale è impostata la regola overflow: hidden e dove una parte del contenuto viene nascosta, l’immagine di sfondo di questo box viene mangiata e si vede solo in parte.
Prendiamo ad esempio questo codice, relativo al box di sinistra dell’home page di diploD:

#homeboxleft {
float: left;
width: 53%;
padding: 10px;
margin: 20px 1% 60px 0;
overflow: hidden;
background: #fff url('images/homeboxbg_left.gif') no-repeat top right;
border: 1px solid #ccc;
}
Questo box ha come immagine di sfondo l’arcobaleno a tre colori. Se all’interno andiamo a mettere un’immagine che sfora le dimensioni del box in larghezza essa viene tagliata, in virtù della regola di overflow. Lo si può vedere bene in questi screenshot. Il primo riporta l’immagine che sfora la larghezza del box mentre il secondo mette in evidenza l’immagine di sfondo “tagliata”.

bug css
bug css

Ciò che accade è sintetizzato in questo schema.

bug css

Questo problema si manifesta su Internet Explorer sia con la versione 6 che con la versione 7, anche se con quest’ultima l’immagine che sfora viene ridimensionata. Su Firefox invece è tutto normale, l’immagine di sfondo viene allineata al bordo del box mentre l’immagine più larga viene automaticamente ridimensionata all’interno del box.

3 Commenti »

Puoi lasciare un tuo commento, oppure fare un trackback dal tuo sito.

Vuoi essere il primo a lasciare un commento per questo articolo? Utilizza il modulo sotto..

Lascia il tuo commento

 

http://livregratis.fr/ - http://club-ebook.fr/

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi