Projektowanie i inne takie...

Dziwna cecha Internet Explorera sprawia, że resetowanie styli w jego przypadku nie działa. Nie działa dokładnie ustalanie rozmiarów nagłówków jeśli wielkość czcionki dla elementu BODY jest określona względnie (procentowo lub w jednostkach em), lub też w jednostkach absolutnych (pc, ex, in), np.:

html, body, div, span, 
h1, h2, h3, h4, h5, h6, p, a, cite, code, em, img, strong, dl, 
dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
	line-height: 1;
}

body { font-size: 62.5%; }

Klik! (~154kb)

Zależnie od wariantu, nagłówki H1-H6 są albo za duże albo za małe choć wielkość pozostałych elementów jest liczona poprawnie. Aby rozwiązać ten problem albo zminimalizować jego negatywne efekty wystarczy, że do naszego arkusza dodamy następujące reguły:

*:first-child+html h1 { font-size: 192%; }
*:first-child+html h2 { font-size: 145%; }
*:first-child+html h3 { font-size: 115%; }
*:first-child+html h4 { font-size: 105%; }
*:first-child+html h5 { font-size: 80%; }
*:first-child+html h6 { font-size: 65%; }

Natomiast, z uwagi na to, że jest to hack, poniższe reguły najlepiej wrzucić do drugiego arkusza i serwować je tylko IE6.

h1 { _font-size: 192%; }
h2 { _font-size: 145%; }
h3 { _font-size: 115%; }
h4 { _font-size: 105%; }
h5 { _font-size: 80%; }
h6 { _font-size: 65%; }

...i wszystko wraca do normy. Voila! (~148kb)


PS: Pisałem to na szybko więc wymaga gruntownego przetestowania!