Fix bug Colorbox in IE7 e IE8

Colorbox è la famosa plugin di visualizzazione gallery per JQuery, è inclusa anche nel pacchetto di Contao 3.
In un sito ho scoperto che gli ingrandimenti rimanevano senza immagine, la finestra modale si apriva ma si stringeva quasi del tutto. Il problema si presenta nei browser IE7 e IE8, e solo quando nel nostro stile css abbiamo usato la regola per adattare le immagini in modo responsive. In pratica la seguente.

Per risolvere il guaio basta ricorrere al consueto commento condizionale (if lt IE 9) che carica la serie di fix per i browser IE inferiori a 9. Aggiungiamo la seguente regola.

Ho trovato anche un altro articolo che parla di questo difetto di IE8. Le immagini spariscono in alcune circostanze usando max-width:100%.

Sembra che le possibili soluzioni siano le seguenti:

• Rimuovere gli attributi width e height dal tag <img> (se sono presenti)
• Dare un valore esplicito di width all'elemento che contiene l'immagine (se esso è in float)
• Dare all'immagine problematica la regola width:auto oppure max-width:none

Da esperienza diretta ho provato senza successo, magari in altri casi funzionano. Nel sito che sto facendo sembra che il problema sia stato risolto rimuovendo la proprietà border-radius.
In definitiva a IE8 ho dato in pasto il seguente fix, rinunciando ai bordi arrotondati e all'adattamento responsive delle immagini. Particolare attenzione va data alla specificità della regola, purtroppo IE8 non mi ha ubbidito subito con il selettore generico img, neppure forzando le regole con !important. Ho dovuto sovrascrivere precisamente le immagini dove le stilizzavo.