Tôi đang làm việc trên một dự án và tôi đang sử dụng display: table và table-row với overflow auto. Nhưng nó không có gì hoạt động như mong đợi trong Firefox (và IE).display: table-row & overflow: tự động hiển thị các hành vi khác nhau trong Chrome, Firefox (và IE)
Trong Chrome, nó hoạt động như mong đợi.
Có this câu hỏi về StackOverflow, có vẻ khá giống với vấn đề của tôi, nhưng không có câu trả lời hoặc mẫu nào được đưa ra.
Tôi đã cố gắng tạo lại điều này trong JSbin và Fiddle, nhưng điều đó không hiệu quả.
Để minh họa cho hành vi trong Chrome và Firefox Tôi đã thực hiện hai screengrabs:
Tôi cũng đã thiết lập một ví dụ HTML quy mô nhỏ, có thể được tìm thấy here . Bạn có thể tái tạo bằng cách mở trang web trong Chrome và Firefox và mở rộng vùng văn bản cho đến khi các vùng chứa phía dưới tràn trang.
Mã
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.tableWrapper {
display: table;
height: 100%;
background: darkgrey;
table-layout: fixed;
width: 800px;
margin: 0 auto;
}
.textArea {
background: #F9F9F9;
padding: 10px 10px 5px 10px;
margin: 10px;
}
.content {
display: table-row;
height: 100%;
margin: 10px;
}
.content div {
display: block;
overflow: auto;
height: calc(100% - 20px);
height: -webkit-calc(100% - 20px);
height: -moz-calc(100% - 20px);
background: #ADE6DF;
margin: 10px;
}
.content p {
background: white;
margin: 10px;
padding: 5px;
}<div class="tableWrapper">
<div class="textArea">
<textarea></textarea>
</div>
<div class="content">
<div>
<p>
Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
</p>
<p>
Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam
erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim
mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo
ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis.
</p>
</div>
</div>
</div>Nó rất bực bội, tôi hy vọng ai đó biết những gì xảy ra.
Tôi không biết chắc chắn nếu nó có bất cứ điều gì để làm với thực tế rằng hộp bảng vô danh đang được tạo trên khắp nơi để giữ bố trí với nhau (.textArea sống trong một ô bảng ẩn danh trong một hàng trong bảng ẩn danh trong .tableWrapper và .content div sống trong một ô bảng ẩn danh bên trong .content). – BoltClock
@BoltClock Bạn có ý tưởng cách sửa lỗi này không? –
@Patrick Hofman: Không, buồn thay. – BoltClock