IE 7 中没有列表的嵌套 CSS 计数器

Question

我有以下 HTML 代码结构（示例）：

<p paraclass="M">Some Text</p>
<p paraclass="A1">enum 1</p>
<p paraclass="A1">enum 2</p>
<p paraclass="A2">enum 2.1</p>
<p paraclass="A2">enum 2.2</p>
<p paraclass="A1">enum 3</p>

并希望它像这样呈现：

Some Text
1 enum 1
2 enum 2
   2.1 enum 2.1
   2.2 enum 2.2
3 enum 3

这对 CSS-pseudotag 非常有效，例如：

p[paraclass="A1"]:before{
   content:counter(A1);
   counter-increment:A1;
   counter-reset: A2;
 }

不幸的是，这在 IE7 中不起作用。
有什么好的解决方案可以在不更改 HTML 的情况下在 IE7 中工作？
对于 JS 解决方案，我有关于我需要的计数器的所有信息（比如ID，他们重置的计数器以及他们拥有的列表样式类型）。有没有更好/更简单的方法？如果没有，我怎样才能使用像“lower-roman”这样的计数器样式而不自己实现它们？
注意：可以使用 jQuery 1.6.2。

Answer 1

首先，您的 HTML 无效。如果您使用 HTML 5 开发，则必须将 paraclass 属性重命名为 data-paraclass，或者如果您使用 XHTML 开发，则必须添加命名空间。

其次，<p> 元素不被认为显示为列表。因此，我鼓励您使用 <ol> 元素，因为它是专门为此目的而设计的，并且受到所有浏览器的支持。