Khi Webkit (Safari, Chrome) gặp một inline-block nơi ...Webkit bỏ qua vertical-align cho inline-block chứa dòng hộp
- chiều cao
line-heightđược quy định - nội dung được trả lại sử dụng nhiều dòng hộp
... thành phần khối nội tuyến bỏ qua quy định vertical-align.
Để giúp minh họa cho vấn đề, tôi có một trường hợp thử nghiệm nhỏ: http://arther.net/lab/webkit-vertical-align-test.html#test
Firefox 3.6, Opera 10,53, và IE7 + đối xử với những inline-block như các yếu tố nội tuyến, và class dọc công trình như mong đợi. Trình duyệt Webkit (và Opera 10.10) xử lý các khối nội tuyến trong tình huống này như các phần tử mức khối, do đó bỏ qua vertical-align. Vì vậy, ai là đúng, và ai là lỗi?
Tôi có thể thấy điều này theo một trong hai cách. Một mặt, bạn có thể nói rằng tất cả các yếu tố nội dòng - ngay cả các khối nội dòng - phải tự định vị chính xác trong dòng có chứa theo vertical-align. Mặt khác, các yếu tố nội tuyến thường xác định một hộp nội tuyến đơn và không có các hộp của riêng chúng. Bất kỳ thứ gì bao gói nhiều hộp, nên là một phần tử cấp khối. Trong trường hợp đó, khối nội tuyến phải được coi là một khối, do đó sẽ bỏ qua vertical-align.
Với hành vi hiện tại, tôi hình dung rằng một trong những điều sau đây là đúng:
- đây là một Webkit lỗi
- đây là một lỗi trong tất cả các động cơ render khác
- spec là mơ hồ về xử lý tình huống cụ thể này và các cách tiếp cận khác nhau đang được thực hiện
Nếu có ai có thể giải thích rõ vấn đề và hành vi mong đợi, tôi sẽ grea tly đánh giá cao nó.
Trong IE8, có một lỗi khác về điều này: Nó không bọc nội dung, do đó, dòng dài là chảy máu ra bên phải. – awe
Đó là một sự xấu hổ đáng hổ thẹn mà câu hỏi này không nhận được nhiều sự chú ý, đó là một vấn đề mà tôi đang gặp khó khăn. –