HTML 4.01 Transitional doctype powoduje niemal trybie standardowym w przeglądarkach. Doctype HTML5 powoduje tryb standardów.
W tym artykule Microsoft wyjaśnia różnicę: http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29.
Mówi, że dla trybu Prawie normami:
elementy Inline przyczynić się do linii wysokość tylko wtedy, gdy jeden z poniższych stwierdzeń jest prawdziwe.
Jeśli element:
pamiętać, że przerwa linia nie jest uważana za znak tekstu dla tej definicji, chyba że jest to jedyna treść pole liniowe. W takim przypadku wysokość linii prostokąta pozostanie najwyżej położoną górną krawędzią pola liniowego i najniższym położonym dolnym dnem linii na linii, niezależnie od podanej wysokości linii .
Jeśli element img jest jedyną zawartością komórki tabeli, to pole liniowe wysokości wysokości komórki linii komórki jest ustawione na zero.
Najbardziej krytycznie w Twoim przypadku, to znaczy, że obliczenie wysokości wiersza zawierającego obraz nie obejmuje strut, wyimaginowany inline element, który powinien zwiększyć wysokość wiersza do wartości liniowego wysokości element h1.
Ten jsfiddle pokazuje prawdziwe span elementu z jako realnej zawartości tekstowej stojącego za rozporki i widać, że układ jest taki sam zarówno w HTML 4.01 Transitional DOCTYPE i DOCTYPE HTML5.
Ten jsfiddle przedstawia ten sam pomysł, tylko tym razem rozporka jest wytwarzany za pomocą CSS, np:
h1:before {
content: '\A0';
}
W przypadku odpowiedzi Khurram za to, co robi jest zmniejszenie line-height h1 iw związku z tym, w trybie standardów, wysokość kolumny jest mniejsza niż wysokość obrazu. Oznacza to, że wysokość linii jako całości zależy od wysokości obrazu, a nie od wysokości kolumny. Wysokość obrazu jest taka sama zarówno w standardach, jak iw trybie prawie standardowym, więc znowu nie widać różnic w renderowaniu między trybami.
Co do tego dlaczego ustawienie wysokości linii h1 w celu dopasowania do wysokości obrazu (25 pikseli) nie działa, ale ustawienie na 12 pikseli powoduje, że kolumna ustanawia nie tylko wierzchołek i spód, ale także linia bazowa dla linii. Linia bazowa znajduje się nieco powyżej dna, aby umożliwić tekstowe zmniejszanie, dla tekstu o normalnym rozmiarze, który zwykle ma około 3 pikseli. Obraz domyślnie znajduje się na linii bazowej, więc odstęp między linią podstawową a dolną jest dodawany do wysokości obrazu w celu ustalenia wysokości linii.
Można to rozwiązać, przesuwając obraz poza linię bazową, używając img { vertical-align: top }, który jest przedstawiony w tym jsfiddle.Jeśli będziesz majstrować z wysokością linii h1, zobaczysz, że wartości większe niż 25 pikseli zwiększają odstępy między liniami, ale wartości 25 pikseli lub mniej nie zmieniają tych odstępów.
Świetna odpowiedź, dobrze zbadana i rozwiązuje problem. – ForOhFor
Rozwiązałem to, ustawiając css obrazu na "display: block;" ... jednak w innym kontekście może to nie być możliwe. – KnF