Internet Explorer 7 (IE7) è una piattaforma impegnativa per gli sviluppatori web, perché è lenta ad abbracciare i nuovi standard e rigoroso nella sua aderenza a questi standard. I progettisti che vengono utilizzati per l'intuizione di altri browser come Firefox o Opera possono essere frustrati da problemi posti da alcune delle funzionalità intrinseca di IE durante il test le pagine web. Il concetto di "layout" in IE è innescato spesso immobili a fogli di stile a cascata. marcatori Elenco e proiettili hanno la tendenza a scomparire se IE applica "hasLayout" per l'elemento, ma ci sono modi per combattere questo problema che lavorano in tutti i browser.

Che cosa è "hasLayout"?

Ogni browser ha i suoi propri mezzi di calcolo HTML e gli stili di una pagina web per determinare come deve essere visualizzato. "Layout" è una di queste funzioni in IE, che valuta i tag specifici e poi li tira fuori in relazione ad altri elementi della pagina. Dove voci di elenco sono interessati, questo di solito significa creare un riquadro intorno alla lista. Quando gli stili di logica e di default del browser "hasLayout" vengono applicate alla casella in cui il foglio di stile non contiene la prevenzione, i marcatori della lista saranno tagliati fuori dal bordo scatola, causando loro di "sparire".

trigger comuni

Il "float" è una delle proprietà che causa IE per applicare "hasLayout" per un elemento, che a sua volta aggiungere un "display: block" di proprietà di stile della lista automaticamente, anche se non si dispone di uno stile esplicito aggiunto i fogli di stile. elementi di blocco non visualizzano stili di elenco di default, quindi finché non si reimposta o il galleggiante o la proprietà di visualizzazione, non verranno visualizzati i marcatori.

Compatibilità correzioni

Una soluzione rapida, se si vuole mantenere intatta la vostra proprietà float, è quello di aggiungere un: proprietà "visualizzazione in linea" al tuo elenco di elementi di stile. Il valore in linea potrebbe non funzionare in liste ordinate, nel qual caso il galleggiante deve essere rimosso o impostato su "None". Per esempio:

ul li {
float: left;
width: 50%;
line-height: 36px;
list-style-image: url (immagini / icon.png);
display: inline;
}

ol {
list-style-type: none;
float: none;
}

ol li {
line-height: 36px;
list-style-image: url (immagini / icon.png);
margin-left: 20px;
}

Definire larghezze o altezze, la fissazione di un "troppo pieno" o "zoom" e con il "position: absolute" proprietà provoca anche problemi. Per superarli, è necessario "resettare" almeno una delle proprietà del problema ad un valore predefinito. Ad esempio, l'altezza o larghezza impostata su "Auto", galleggiare a "none" o troppo pieno per "visibile".

proprietà supportate

IE7 e versioni precedenti contengono solo un supporto parziale per l'intera gamma di tipi di lista di stile disponibili in CSS. Se si utilizza un valore di proprietà non supportato, apparirà nulla. Come descritto in riferimento CSS di SitePoint, "Internet Explorer per le versioni di Windows fino al 7 non supportano i valori 'armeno', 'decimale-leader-zero', 'georgiana' o 'inferiore greco.' Né sostengono i valori 'inferiore latino' o 'superiore latino,' anche se lo fanno sostenere le forme alternative 'lower-alpha' e 'superiore-alpha.' "

Uso delle immagini come marcatori

Anche se non è una soluzione infallibile per i marcatori in IE7 causa del problema "hasLayout" mancante, l'assegnazione di un'immagine come list-style-type o voce di elenco sfondo è un mezzo alternativo di visualizzazione marcatori senza preoccuparsi di stili di elenco supportati. Tuttavia, si applicano le stesse regole in materia di carri e blocchi. Le immagini possono essere utilizzati in uno dei due modi, sia a livello superiore con "list-style", o il livello di articolo elenco utilizzando "background". Per esempio:

ul {list-style: url ( "images / bullet.gif") no-repeat; }

O:

ul {list-style-type: none; }
li {background-image: url ( "images / bullet.gif") no-repeat; }