Invece di studiare Analisi 2, stavo sistemando un foglio di stile su un sito web che ha la necessità di funzionare correttamente con il maggior numero di browser (come tutti del resto) e ho scoperto uno strano comportamento di Internet Explorer 5 con la proprietà font-size dei CSS e le tabelle.
<satira>Che strano… Un errore con Internet Explorer….</satira>
Secondo la Bibbia, font-size è una proprietà che eredita (Vangelo secondo W3C, 15, 7).
Per coloro che non credono, ricordo che quando una proprietà eredita, questa, se non indicato diversamente, prende lo stesso valore specificato (o a sua volta ereditato) per la stessa proprietà nel suo elemento genitore (parent element).
Vediamo di fare un esempio:
<div id="container">
Paragrafo diglio di div#container e discendente di body
</div>
Paragrafo figlio di body
Applichiamo questo foglio di stile:
body{
font-family: Verdana;
font-size: 10px;
}
div#container{
font-size: 14px;
}
Il risultato dovrebbe essere lo stesso che vedete nell’immagine qui sotto:
Il primo <p> eredita il valore 14px da div#container il quale non ha ereditato 10px da body perchè ha espressamente indicato appunto 14px.
Il secondo paragrafo invece eretida il valore specificato su body generando quindi un testo di dimensione 10px.
Fin qui tutto OK. Anche Internet Explorer ci arriva.
Proviamo a mettere una tabella al posto dell’ultimo paragrafo (e lasciamo inalterato il CSS):
<div id="container">
Paragrafo diglio di div#container e discendente di body
</div>
<table border="0">
<tbody>
<tr>
<td>Prima cella di una tabella figlia di body</td>
</tr>
</tbody></table>
Qui Internet Explorer 5.5 inciampa:
Pagina visualizzata su IE6, Firefox, Opera,ecc :
ecco invece la stessa pagina renderizzata con IE 5.5:
Come potete vedere, per qualche strano motivo, Internet Explorer 5.5 tratta diversamente le tabelle dagli altri tag nonostante il messia non si sia espresso in merito.
Analizzato il problema vediamo di fare in modo che anche quei pochi e sfortunati utenti che ancora utilizzano questo browser corrotto e peccatore possano invece vedere correttamente i nostri siti web:
La soluzione è semplice e senza controindicazioni: è sufficente ricordare a IE 5 che il testo all’interno dei tag table deve avere un valore pari al 100% del font-size del tag genitore (di fatto facciamo ereditare la proprietà artificialmente).
table{
font-size: 100%;
}
oppure:
table{
font-size: 1em;
/* Per la proprietà font-size i valori in % e in em sono intercambiabili */
}
Ed ecco che anche IE 5 segue la retta via… 
Update:
Sembra che non solo la proprietà font-size abbia questo problema, ma qualsiasi stile sia dato al testo… W IE 
