Quirks mode, strict mode — dwa tryby pracy przeglądarek internetowych

2. Przykładowe różnice w interpretacji CSS w trybach quirks mode oraz strict mode

Przykładowe różnice w interpretacji stylów CSS to:

• wyznaczanie szerokości pudełka,
• centrowanie elementów blokowych,
• wyświetlanie obrazów.

Pierwszy problem polega na tym, że wpis:

div {
    width  : 100px;
    margin : 20px;
}

będzie błędnie interpretowany przez IE5 oraz IE6 (ale tylko w trybie quirks mode). IE5 ustali faktyczną szerokość elementu na 100, podczas gdy prawidłowa wartość powinna wynosić 140 (100 + lewy margines 20 + prawy margines 20).

Drugi problem polega na tym, że wyśrodkowanie elementu blokowego wykonywane prawidłowo:

margin : 0 auto;

nie zadziała w IE5. W przeglądarce tej należy użyć atrybutu:

text-align : center;

Wreszcie trzeci problem, wyświetlanie obrazków, dotyczy wielu przeglądarek, nie tylko IE. Element img, który pierwotnie był elementem blokowym, po wprowadzeniu stylów CSS został przemianowany na element tekstowy. Pod obrazkami pojawiła się kilkupikselowa pozioma przerwa. Wynika to z tego, że wysokość elementów tekstowych jest tak dobrana, by w linii zmieściły się litery takie jak j, p, czy g sięgające poniżej linii centralnej tekstu. Problem ten rozwiążemy zmieniając typ elementu img:

img {
    display : block;
}

lub wysokość linii elementu blokowego, w którym obraz został umieszczony:

line-height : 0;