Risolvere il problema delle liste numerate in Internet Explorer 7

Giorgio Borelli

Sebbene l'argomento specifico è sicuramente datato, torniamo a parlare nuovamente di compatibilità cross-borwser, problema invece sempre attuale, ed indovinate chi è il colpevole? Internet Explorer versione 7. Lo so, lo so che ormai la migrazione degli utenti verso la versione 9 ed adesso la 10 con il nuovo Windows 8 procede celermente, ma ancora vi sono molti utenti che usano Internet 8 o come nel caso in questione IE7, e poi per chi sviluppa web, bisogna assicurare una certa resa grafica per tutti i browser in tutte le versioni dei siti realizzati, non dico che la compatibilità sia raggiungibile al 100% (soprattutto con le versioni più vecchie) ma quanto meno cerchiamo di risolvere i problemi più comuni.

Il problema è questo, quando andiamo a creare delle liste numerate tramite il tag ol, in Internet Explorer 7, la lista viene presentata con una numerazione non crescente, ovvero ogni elemento presenta sempre il numero 1. Risolvere questo bug è semplice, andiamo a vedere come fare.

Quando definiamo una lista numerata per il cui tag sia stato specificato il valore width nella regola css dei list item, Internet Explorer 7 presenta un problema di visualizzazione, la lista non risulta numerata, ma ripete il numero 1 per ogni elemento. Supponiamo pertanto di definire il tag html lista ordinata in questo modo:

<ol>
    <li>Pippo</li>
    <li>Pluto</li>
    <li>Paperino</li>
</ol>

l'effetto che otteniamo quando apriamo la pagina con IE7 è quello mostrato nella figura sottostante:

visione lista numerata con internete explorer 7

Risolvere questo bug, è pressochè immediato, bisogna precisare che questo errore si verifica quando viene specificato il valore width per i li (list item) della lista, in questo caso Internet Explorer7 non incrementa il valore nuemerico degli elementi, fermandosi ad uno per ciascuno di essi.

Per risolverlo (fix) basta specificare il valore display:list-item; nella regola di stile inerente gli elementi della lista, in questo modo:

ol li {
    list-style-type:decimal;
    display:list-item;
    width:250px;
}

aggiungendo questa regola nel css, risolviamo immediatamente il problema di renderizzazione delle liste numerate in Internet Explorer 7, questo è quanto, non serve altro.

Per chi volesse testare la resa cross-browser con le varie versioni di Internet Explorer, può provare l'ottima utility IETester, qui trovate il link per l'approfondimento:

IETester

Chiunque volesse aggiungere o chiedere qualcosa, lo spazio dei commenti è a vostra disposizione.

Categorie: Browser | CSS

Tags: , ,

Pingbacks and trackbacks (1)+

Aggiungi Commento

biuquote
Loading