Hãy xem xét các mã HTML sau đây:CSS: bất ngờ vị trí thẳng đứng của "inline-block" yếu tố
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>test</title>
<style>
.section {
display: inline-block;
border: 1px dashed blue;
}
.outer {
border: 1px dashed red;
margin: 10px;
}
</style>
</head>
<body>
<div style="height: 500px; width: 200px;" class="section">a
<div style="height: 100px;" class="outer">1A<br />1B</div>
</div>
<div style="height: 500px; width: 200px;" class="section">b
<div style="height: 200px;" class="outer">2</div>
<div style="height: 200px;" class="outer">3<br />4<br />5</div>
</div>
</body>
</html>
Kể từ khi cả hai divs với lớp ".section" là cùng một chiều cao, và là inline-block, tôi hy vọng chúng sẽ được căn chỉnh theo chiều dọc. Tuy nhiên, phần đầu tiên của các div này bị đẩy xuống để văn bản "1B" được căn chỉnh với dòng văn bản "5" từ phần khác. Việc thêm hoặc xóa các dòng trong một trong hai div có tác động trực tiếp đến vị trí thẳng đứng của phần đầu tiên của tôi.
Tôi không thấy logic này và tôi cũng không thể tìm thấy câu trả lời trong tài liệu CSS3 chính thức. Tuy nhiên, nó không có vẻ là một lỗi, vì nó giống hệt nhau trong Chrome 8, Safari 5, Opera 9.5 và Firefox 4 beta ... đã không thử IE, vì nó không phải là một tham chiếu anyway.
Tôi đang tìm kiếm giải thích hợp lý cho hiện tượng này. Tất nhiên có một vài cách giải quyết (ví dụ: thay đổi inline-block thành inline-table để khắc phục sự cố, hoặc tôi có thể sử dụng các khối nổi thông thường, v.v.). Tuy nhiên tôi đang cố gắng để hiểu hành vi này.
Hy vọng rằng có ai đó khôn ngoan hơn bản thân mình, những người có thể giải thích điều này.
Ví dụ trực tiếp here.
Tại sao các bạn trộn bên ngoài và nội tuyến phong cách? – Kyle
Để giúp kiểm tra điều này, tôi đã tạo một [trang JSFiddle] (http://jsfiddle.net/QfPKD/) bằng cách sử dụng mã gốc (được sửa đổi một chút để sử dụng ít kiểu nội tuyến hơn, nhưng cũng có hiệu lực tương tự). – Spudley
Tôi đã làm điều tương tự: D Ngoại trừ không sửa đổi kiểu nội tuyến. – Kyle