Disc sang trái của mục danh sách được hiển thị ở phía dưới

Question

Ảnh chụp màn hình của những gì đang xảy ra:

Nó chỉ là một mục danh sách trong một danh sách underordered, điều này đang xảy ra trong IE7 và nơi nào khác.

<ul> 
    <li>Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text.</li> 
</ul> 

.fancybox-entry.computer-policy li { 
    float:none; 
    width:100%; 
    list-style-type:disc; 
    margin-bottom:10px; 
} 

.fancybox-entry.computer-policy ul + p { 
    margin-bottom:20px; 
} 

.fancybox-entry.computer-policy ul { 
    margin:5px 0 10px 25px; 
} 

Bất kỳ trợ giúp nào về lý do khiến việc này được khắc phục.

Answer 1

Dường như các trình kích hoạt thuộc tính CSS chiều rộng hasLayout cho phần tử li trong IE7. Trước tiên, hãy thử xóa khai báo width:100%; để đảm bảo dấu đầu dòng xuất hiện ở đúng vị trí. Nếu bạn không thể làm mà không có thuộc tính chiều rộng, bạn có thể sử dụng position: relative; và vertical-align: top; để di chuyển dấu đầu dòng trở lại vị trí, như được nêu tại http://www.gunlaug.no/tos/moa_26.html.

Lưu ý rằng mã trên trang đó sử dụng hacks để nhắm mục tiêu IE6 và IE7. Thay vào đó, tôi khuyên bạn nên sử dụng nhận xét có điều kiện, như vậy:

<!--[if IE 7]> 
    <style type="text/css" media="screen"> 
    /* IE7-specific CSS here */ 
    </style> 
<![endif]--> 

Answer 2

Danh tiếng của tôi vẫn còn quá thấp để nhận xét, nếu không tôi sẽ thêm câu trả lời này vào câu trả lời của peterjmag. (Có thể anh ta có thể bao gồm nó ...)

Thuộc tính chiều rộng là thủ phạm, nhưng tôi sẽ đề xuất một thay đổi khác. Để đảm bảo các phần tử danh sách của bạn chiếm toàn bộ chiều rộng trong IE7, hãy sử dụng "width: auto" để thay thế. Điều này sẽ cung cấp cho bạn cùng một cái nhìn và điểm bullet của bạn sẽ diễn ra đúng chỗ của họ. Tôi đã tìm thấy rằng "dọc-align: top/text-top" đẩy các điểm đạn chỉ là một chút về phía bắc của nơi tôi muốn chúng.

Nếu bạn không có các lớp có điều kiện hoặc biểu định kiểu IE, chỉ cần sử dụng "* width: auto" để nhắm mục tiêu IE7.