Làm cách nào để ngăn thanh cuộn chồng chéo nội dung?

Question

Tôi có một khối mã định dạng sẵn (< trước >) tràn theo chiều ngang để có thanh cuộn ngang cho phép người dùng xem nội dung.

overflow: auto; 

Tuy nhiên, trong IE7 (có thể các phiên bản IE khác), thanh cuộn chồng lên dòng cuối cùng của nội dung của tôi (đặc biệt khó chịu khi chỉ có một dòng nội dung).

Tôi đã thử giải pháp được liệt kê here nhưng đã không hoạt động.

Giải pháp duy nhất mà làm việc là sử dụng

overflow: scroll; 

có thêm một thanh cuộn để tất cả các phần định dạng sẵn của tôi mà chỉ là khủng khiếp.

Lưu ý: Nó hoạt động tốt trong Firefox 3 và Google Chrome.

---

Cập nhật

Tôi đã tìm thấy một giải pháp (xem câu trả lời của tôi), nhưng nếu ai đó tìm thấy một cách để không có đệm xấu xí trong mỗi phần định dạng sẵn trong IE7, đó sẽ là hoàn hảo.

Answer 1

Chỉ sau khi đăng câu hỏi tôi đã nghĩ về việc kiểm tra xem stackoverflow có xử lý được điều đó không.

Tôi đã xem xét các stylesheet và thấy điều này:

padding-bottom: 19px!ie7; 

(tốt, họ sử dụng 20px, nhưng 19 nhìn tốt hơn).

Nó chỉ thêm một phần đệm dưới cho IE7, làm cho mọi phần được định dạng trước mà không có thanh cuộn trông hơi kỳ lạ vì phần đệm lớn, nhưng ít nhất tôi có thể xem nội dung (và nó trông kỳ lạ trên stackoverflow).

Xin lỗi vì đã đặt câu hỏi quá nhanh.

Answer 2

Bọc PRE của bạn trong một DIV với một số lề bổ sung.

Answer 3

Bọc PRE trong một DIV và áp dụng overflow: scroll; cho DIV. Đảm bảo bạn sử dụng hoặc <div style="overflow: scroll; width='...'; height='...';"> hoặc gán một lớp cho div để đảm bảo không phải tất cả chúng đều có thanh cuộn.

Ví dụ: trong blog của mình, tôi sử dụng <div style="overflow: scroll; width: 100%;"> cho các đoạn mã nhỏ để mọi người có thể cuộn theo chiều ngang và div sẽ tăng lên với chiều cao chính xác. Đối với các phần dài hơn, tôi cũng chỉ định chiều cao để giảm độ dài của toàn bộ bài viết; mọi người có thể cuộn theo chiều dọc.

Bạn cũng có thể thử <div style="overflow: scroll; overflow-y: hidden; width: 100%;"> để chỉ nhận được thanh cuộn ngang (và cả hai đều không bị tắt). Có thể <div style="overflow-x: scroll; width: 100%;"> cũng hoạt động.

Answer 4

thêm 'đệm dưới cùng: 20px' vào thẻ trước