Lỗi tràn CSS: ẩn giấu dấu đầu dòng của danh sách?

Question

Tôi vừa mới nhận thấy điều gì đó buồn cười. Hãy nói rằng tôi có một danh sách HTML:

<ol> 
    <li>Lorem</li> 
    <li>ipsum</li> 
    <li>dolor</li> 
    <li>sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.</li> 
</ol> 

Và CSS này:

li { 
    white-space: nowrap; 
    overflow: hidden; 
} 

Các văn bản dài trong mục cuối cùng thực sự bị hack tắt khi nó đi ra chiều rộng của thùng chứa, như mong đợi. NHƯNG! Số mục danh sách cũng bị ảnh hưởng bởi thuộc tính overflow và không được hiển thị.

Tuy nhiên, sửa đổi CSS như thế này:

ol { 
    overflow: hidden; 
} 
li { 
    white-space: nowrap; 
} 

công trình như dự định (văn bản sẽ không đi ra khỏi container, nhưng danh sách các mục được hiển thị). Ít nhất tất cả điều này là đúng đối với Firefox 4 beta10.

Bạn có nghĩ rằng việc đánh số bị ảnh hưởng bởi overflow có hơi phi lý không? Tại sao điều đó lại xảy ra? Nó có phải là hành vi có ý định không? Là nó trong các đặc điểm kỹ thuật hoặc là nó chỉ là một số oddity ai đó quên để đối phó với?

Answer 1

Đây là hành vi mặc định theo như tôi biết, nếu list-position là outside, dấu đầu dòng ul và số của ol không hiển thị. Ít nhất trong Firefox tôi nhớ đã thấy nó trước đây trong các phiên bản cũ.

Answer 2

Tôi đã thấy các dấu đầu dòng/số của tôi bị cắt bớt khi không có đủ đệm ở phía bên trái của ul. Hãy thử thêm một chút và xem điều đó có giúp ích gì không.

Answer 3

Trình duyệt thêm lề và lề mặc định vào danh sách. Hãy thử sử dụng tệp reset.css trước tiên để xóa kiểu mặc định theo cách bạn có thể bắt đầu sạch sẽ và mới mẻ mà không có hành vi không mong muốn. Thực hiện tìm kiếm thiết lập lại của Eric Meyer. Hy vọng nó giúp.