verosimile.it

Esperimenti CSS

Internet Explorer 8 e la sua curiosa gestione della sottolineatura negli heading linkati che contengono un bold

Internet Explorer: nuova versione, nuovi bachi!

Immaginiamo di avere un titolo, per esempio un h4 (il quale abbiamo stabilito via CSS che non deve essere in grassetto) linkato che contiene una parte in bold. Se il link lo vogliamo sottolineato, la sottolineatura non dev’essere in grassetto, giusto?
Per capirci, questo è ciò che ci aspettiamo di vedere:

E infatti è quello che ci viene presentato da tutti i browser. O meglio: da tutti i browser tranne uno. Ecco infatti come Internet Explorer 8 gestisce l’elemento:

Come possiamo vedere, l’ultimo browser di casa Redmond, in presenza di un titolo linkato con dentro un bold, bolda anche la sottolineatura. Comportamento che nemmeno i suoi eccentrici predecessori si sognavano di avere.

Ma non è tutto. Guardate un po’ come IE 8 gestisce il medesimo elemento in presenza di meno testo boldato:

Ora la sottolineatura non è più boldata (uniformandosi all’interpretazione di tutti gli altri browser).
Cos’è successo? Semplice: in questo esempio la parte del titolo linkato in bold è minore di quella non in bold.
Quindi abbiamo scoperto che IE 8 decide di boldare o meno la sottolineatura di un titolo con dentro un link che a sua volta contiene un tag “b” (o “strong”) facendo un calcolo tra il rapporto di testo in grassetto e di testo normale. Se il testo in grassetto è maggiore di quello normale, la sottolineatura sarà boldata, e viceversa.

Potrebbe bastare. Ma a quanto pare IE 8 non vuole essere da meno dei suoi antenati in stramberia, per cui a complicare ulteriormente il quadro, notiamo che proprietà di stile come il font-family e il font-size influiscono sulla boldatura o meno della sottolineatura. Ecco alcuni esempi:

Baco di Internet Explorer 8 nella gestione della sottolineatura dei link nei titoli con bold

CSS	Risultato in IE 8 con testo in bold minore del testo normale:	Risultato in IE 8 con testo in bold maggiore del testo normale:
h4 {font-family: Georgia; font-weight: normal;}
h4 {font-size: 1.9em; font-family: Georgia; font-weight: normal;}
h4 {font-size: 1.9em; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal;}
h4 {font-size: 2em; font-family: Georgia; font-weight: normal;}

Insomma, cercando una qualche regola generale si potrebbe sostenere:

Comunque, l’unica soluzione che mi viene in mente per normalizzare il formato della sottolineatura in questi casi, è quello di usare la proprietà border-bottom in questo modo (ma alla Microsoft fare browser normali, mai, eh?):

a {border-bottom: colore-del-link 1px solid; text-decoration:none;}

Infine, per chi volesse testare sul campo questo curioso comportamento di IE 8, ho preparato due esempi reali, da guardare col suddetto browser:

Titolo linkato con carattere senza grazie, testo a 18px e poco testo in bold:

Lorem ipsum dolor sit amet

Titolo linkato con carattere senza grazie, testo a 18px e molto testo in bold (sottolineatura boldata con IE 8):

Lorem ipsum dolor sit amet

Titolo linkato con carattere con grazie, testo a 18px e poco testo in bold:

Lorem ipsum dolor sit amet

Titolo linkato con carattere con grazie, testo a 18px e molto testo in bold:

Lorem ipsum dolor sit amet

Titolo linkato con carattere con grazie, testo a 26px e poco testo in bold:

Lorem ipsum dolor sit amet

Titolo linkato con carattere con grazie, testo a 26px e molto testo in bold (sottolineatura boldata con IE 8):

Lorem ipsum dolor sit amet