Ciao, sto sbattendo la testa su una struttura ad albero con elenchi annidati che viene visualizzato correttamente su tutti i browser (anche ie7 e 8, con mancato riconoscimento di last-child ma questo non è importante), ma che con ie9 appare con uno spostamento di 6 pixel.
L'albero ha un primo elenco in base al quale sono posizionati assolutamente gli altri. Il connettore da padre a figlio è impostato sul div interno alle voci elenco.
Il codice:
fra il div e l'elenco che segue appare lo spazio indesiderato (se porto il top degli elenchi assoluti a 114 pixel oppure il padding-bottom del div interno a 42 pixel il connettore appare posizionato correttamente - ma non più sugli gli altri browser). Stranamente, se uso una sola o due sole righe nell'elenco - reimpostando il top su valori più bassi - la visualizzazione appare eguale su tutti i browser.codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Documento senza titolo</title> <style type="text/css"> <!-- * {margin: 0; padding: 0;} body { font-family: arial, verdana, tahoma; } .tree ul { padding-top: 20px; position: relative; width:100%; text-align:center; } .tree ul ul { position: absolute; top:120px; left:0 } li { display:inline-block;text-align: center; vertical-align:top; margin:0 -2px; /* For IE 7 */ zoom: 1; *display: inline; list-style-type: none; padding: 20px 5px 0 5px; background-image:url(border3.gif); background-repeat:no-repeat; background-position:top center; font-size:10px } .tree li:first-child{ background-image:url(border.gif); } .tree li:last-child{ background-image:url(border2.gif); } .tree li#first{ background-image:none; } .tree li div{ background-image:url(filVert.gif); background-repeat:no-repeat; background-position: center bottom; padding-bottom:36px } --> </style> </head> <body> <div class="tree"> <ul> <li id="first"> <div>nome e cognome data nascita sposato con nome cognome data di nascita</div> <ul>[*]nome data nascita sposata il ... con nome cognome da nomi e cognomi[*]nome data di nascita [*]<div>bla bla data di nascita sposato l'11/11/1810 con bla bla di bla bla</div> <ul>[*] bla bla data di nascita[*] bla bla data di nascita sposato il ... a bla bla con bla bla di bla bla e bla bla[*]bla bla data di nascita sposato il ... a bla con bla bla [*]bla data di nascita[/list] [/list] [/list] </div> </body> </html>
Potrei sovrascrivere i valori necessari solo per ie9, ma prima di inserire un css specifico mi chiedo e vi chiedo: perché questo sfasamento?
Allego immagini di sfondo
Rispondi quotando