Các mục danh sách lồng nhau trong các mục danh sách của Danh sách có thứ tự?

Question

Tôi đang cố gắng tìm ra cách tạo danh sách được sắp xếp theo thứ tự tăng lên hiện đang hướng tới IE6 và IE7.

E.G. Nó phải làm một cái gì đó như dưới đây:

1.0 
    1.1 
    1.2 
    1.3 
2.0 
    2.1 
    2.2 

Từ những gì tôi hiểu, điều này có thể tạo ra trong CSS với một cái gì đó như thế này:

UL, OL { counter-reset: item; } 
LI { display: block } 
LI:before { content: counters(item, "."); counter-increment: item } 

Tuy nhiên, tất nhiên, IE6 và IE7 không hỗ trợ điều này.

Tùy chọn nào có sẵn để tạo danh sách tăng lên thích hợp trong IE6/7? Tôi có bị kẹt phải mã hóa cứng này không? Thật không may, việc sử dụng JavaScript không phải là một lựa chọn.

Có phương pháp được cập nhật nào cho các trình duyệt mới hơn không?

Answer 1

Nếu javascript không phải là một tùy chọn (và do đó tôi cũng không giả định flash), tôi rất tiếc khi nói rằng bạn không có lựa chọn nào cho giải pháp phía máy khách. Nếu bạn có một kịch bản phía máy chủ đang tạo HTML của bạn, bạn có thể đẩy thứ tự đến máy chủ và chỉ cần tạo đầu ra trên máy khách bằng cách sử dụng CSS làm danh sách không có thứ tự mà không có dấu đầu dòng. IE6 là yếu tố hạn chế của bạn ở đây, và không có nhiều cách xung quanh đó. Xin lỗi để được ghi tên của tin tức xấu.

Answer 2

Nếu JavaScript không phải là một tùy chọn, bạn sẽ phải mã hóa cứng nó/triển khai nó ở phía máy chủ.

Mặt tích cực là: Nó sẽ hoạt động đối với các đại lý/thiết bị khác ít có khả năng sử dụng (nghĩ BlackBerry Browser, v.v.) ngay lập tức.

Answer 3

XSLT (bao gồm XSLT 1.0) có thể tạo các chuỗi đánh số đa cấp với <xsl:number>.

Answer 4

Đây là một CSS chỉ giải pháp (nên làm việc trong IE8 trở lên):

<ol> 
    <li> 
     Heading 
     <ol> 
      <li>list</li> 
      <li>list</li> 
     </ol> 
    </li> 
    <li> 
     Heading 
     <ol> 
      <li>list</li> 
      <li>list</li> 
     </ol> 
    </li> 
</ol> 



ol{ 
    list-style-position:inside; 
    list-style-type: none; 
    counter-reset:mainNum; 
} 

ol li:before{ 
    content: counter(mainNum) ".0"; 
    counter-increment:mainNum; 
} 

ol ol{ 
    counter-reset:item; 
} 

ol ol li{ 
    list-style-type:none 
} 

ol ol li:before{ 
    content: counter(mainNum) "." counter(item) " "; 
    counter-increment:item; 
}