HTML 4,01 DOCTYPE chuyển tiếp gây Hầu như tiêu chuẩn chế độ trong các trình duyệt. Tài liệu HTML5 gây ra chế độ Chuẩn.
Bài viết này của Microsoft giải thích sự khác biệt: http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29.
Nó nói rằng cho chế độ Hầu Tiêu chuẩn:
yếu tố góp phần Inline so với Line height khi và chỉ khi một trong những sau đây là đúng.
Nếu các yếu tố:
Lưu ý rằng một ngắt dòng không được xem là một nhân vật văn bản cho định nghĩa này trừ khi nó là nội dung duy nhất của một hộp đường. Trong trường hợp đó, chiều cao hộp dòng vẫn là trên cùng của hộp nội tuyến trên cùng và dưới cùng của dòng nội tuyến thấp nhất trên dòng, bất kể chiều cao dòng được chỉ định là .
Nếu phần tử img là nội dung duy nhất của ô bảng, hộp dòng chiều cao của chiều cao hộp dòng ô được điều chỉnh về 0.
Nghiêm trọng nhất trong trường hợp của bạn, có nghĩa là việc tính chiều cao của dòng chứa hình ảnh không bao gồm strut, yếu tố nội tuyến tưởng tượng sẽ tăng chiều cao dòng lên giá trị chiều cao dòng phần tử h1.
jsfiddle Điều này cho thấy một span yếu tố thực sự với một như nội dung văn bản thực đứng cho strut, và bạn có thể thấy rằng cách bố trí giống với cả một loại tài liệu được chuyển tiếp HTML 4,01 và một DOCTYPE HTML5.
jsfiddle Điều này cho thấy ý tưởng tương tự, chỉ có thời gian này, các thanh chống được chế tạo sử dụng CSS, như thế này:
h1:before {
content: '\A0';
}
Trong trường hợp câu trả lời Khurram, những gì ông đang làm là giảm line-height của h1 và do đó, ở chế độ tiêu chuẩn, chiều cao của thanh chống nhỏ hơn chiều cao của hình ảnh. Điều này có nghĩa là chiều cao của toàn bộ đường thẳng được xác định bởi chiều cao của hình ảnh chứ không phải chiều cao của đường kẻ. Chiều cao của hình ảnh là như nhau trong cả hai tiêu chuẩn và chế độ tiêu chuẩn gần như vậy một lần nữa, bạn không thấy một sự khác biệt trong rendering giữa các chế độ.
Đối với lý do tại sao đặt chiều cao dòng của h1 để khớp với chiều cao của hình ảnh (25px) không hoạt động nhưng đặt nó thành 12px, đó là do strut thiết lập không chỉ trên cùng và dưới cùng, nhưng cũng là đường cơ sở cho dòng. Đường cơ sở cao hơn một chút so với phía dưới để cho phép các con cháu văn bản, cho văn bản kích thước thông thường thường là khoảng 3px. Hình ảnh theo mặc định nằm trên đường cơ sở để khoảng cách giữa đường cơ sở và đáy được thêm vào chiều cao của hình ảnh để thiết lập chiều cao của đường.
Điều này có thể được giải quyết bằng cách di chuyển hình ảnh ra khỏi đường cơ sở, bằng cách sử dụng img { vertical-align: top }, được hiển thị trong số jsfiddle này.Nếu bạn tinker với chiều cao dòng h1 ở đây, bạn sẽ thấy rằng các giá trị lớn hơn 25px tăng khoảng cách giữa các dòng, nhưng các giá trị từ 25px trở xuống không thay đổi khoảng cách đó.
Câu trả lời hay, được nghiên cứu kỹ và giải quyết vấn đề gốc. – ForOhFor
Tôi đã giải quyết điều này bằng cách đặt css của hình ảnh thành "display: block;" ... tuy nhiên trong một ngữ cảnh khác, điều này có thể không khả thi. – KnF