L’argomento:

Queste versioni di Internet Explorer non supportano le Media Query (nè HTML5… anzi, non supportano nulla!) ma fortunatamente esistono delle librerie che – via javascript – risolvono il problema.

• css3-mediaqueries-js - supporto esteso alle media query CSS3
• respond.js – supporto ottimizzato alle media query CSS3 per il “mobile first” responsive design

Io utilizzo respond.js perchè mi interessa solamente intercettare le dimensioni dello schermo ed agire di conseguenza sulla presentazione della pagina web ed è proprio su questa libreria che si concentra l’errore segnalato in questo post.

L’errore:

Questa libreria va in errore quando il foglio di stile contiene delle regole vuote:

body {}

La soluzione:

La semplicissima soluzione consiste nell’inserire almeno uno spazio all’interno delle parentesi graffe:

body { }

Conclusioni:

Molti di voi sostengono – a ragione – che questo tipo di istruzioni non dovrebbero esistere in un foglio di stile in quanto sono un semplice spreco di spazio e di tempo di caricamento. Sono pienamente d’accordo!

Tuttavia in piena fase di sviluppo molti sviluppatori usano scrivere il set completo di “css handler” per definire le regole interne in un secondo momento. In questo caso – in progettazione – questo bug può far perdere tempo prezioso e la soluzione proposta in questo articolo diventa utilissima!

Segnala presso:

Visualizzazione Errata:

ie8 rendering errato di fieldset con legend nascosto

Visualizzazione Corretta (work-around applicato):

IE8 visualizzazione di un fieldset con legend nascosto (workaround applicato)

Markup Originale:

xHTML:
-----------------
<fieldset>
    <legend>Legenda</legend>
    ....
</fieldset>
CSS:
-----------------
fieldset { border:6px solid #ddd; }
fieldset legend { display:none; }

Spiegazione Workaround:

La soluzione più semplice e cross-browser è inserire uno SPAN all’interno del tag LEGEND e quindi applicare la visibilità nulla a questo elemento:

xHTML:
-----------------
<fieldset>
    <legend><span>Legenda</span></legend>
    ....
</fieldset>
CSS:
-----------------
fieldset { border:6px solid #ddd; }
fieldset legend span { display:none; }

Segnala presso: