Tôi có bố cục hiển thị hoàn toàn tốt trong trình duyệt dựa trên Webkit nhưng trong trình khám phá internet và firefox, căn chỉnh theo chiều dọc bị tắt. Ví dụ đơn giản nhất của mã này là:tràn: bị ẩn; gây ra vấn đề liên kết trong firefox
<html>
<head>
<style>
body {
padding: 20px;
background-color: #c0c0c0 ;
}
#wrapper {
border: 4px solid #9cf ;
}
#wrapper > div {
display: inline-block ;
height: 30px ;
line-height: 30px ;
}
#content1 {
width: 100px ;
background-color: yellow ;
}
#content2 {
width: 325px ;
overflow: hidden ;
white-space: nowrap ;
background-color: blue ;
}
#content3 {
width: 400px ;
background-color: red ;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content1">Content 1</div>
<div id="content2">A rather long string which will become truncated and cause the vertical alignment issue</div>
<div id="content3">Another piece of content</div>
</div>
</body>
</html>Bạn sẽ thấy rằng div # content2 được đẩy lên tương đối so với # content1 và # content3 divs. Tôi có một lý do tương đối mạnh để sử dụng các khối nội tuyến trên phao nổi trong tình huống này, tuy nhiên nếu "sửa chữa" duy nhất là di chuyển đến phao nổi, tôi sẽ phải tiếp tục với nó, tuy nhiên tôi muốn tránh việc đó nếu có thể là, hiện tại, thời gian là ngắn cho khởi động thử nghiệm thí điểm của chúng tôi, về lâu dài, bố cục có thể được di chuyển đến phao nổi.
Hơn nữa, tôi đã cố gắng để gây rối với lợi nhuận và paddings để không thành công. Trong mớ hỗn độn đó, tôi đã thiết lập rằng nó là sự hiện diện của tràn: ẩn trong # content2 gây ra sự biến dạng line-break-esque này.
Bất kỳ trợ giúp nào được đánh giá cao.
Bạn đang sử dụng loại tài liệu? –
yup, không có trong ví dụ này. Doc loại os xhtml nghiêm ngặt. – Mike