0

这里的例子：http: //jsfiddle.net/Zyniker/cSPBf/

背景 我有一个页面，它使用 CSS 演示了许多不同的列表类型。当页面的访问者点击一个按钮时，一个示例列表会删除其所有类（即removeClass()），然后将与单击的按钮相对应的特定类添加到其中（即addClass()）。显然，此设置使用 jQuery。

问题 在 Chrome 和 Firefox 中一切正常（我还没有测试过 IE），但是 Safari 在我大约三分之一的列表样式上存在问题。请参阅有问题的代码部分的 jsfiddle 链接。值得注意的是，这个问题只有在多种样式之间来回切换时才会出现（甚至不是所有样式）。在编号关闭（例如，第一个 li 收到 0）或完全不起作用（即，所有 li 收到 0）的情况下，似乎会出现 counter() 的问题。值得注意的是，当在格式样式按钮之间按下“重置格式”按钮（仅对示例文本执行 removeClass()）时，不会出现此问题。这更加奇怪，因为每个按钮在相关的 addClass() 指令之前都包含一个 removeClass() 指令。

更多信息 正如您从 jsfiddle 中看到的，我使用 :before 和 content 将列表编号添加到示例文本中。Safari 对任何在 counter() 之前没有任何内容的列表样式没有任何问题。当 counter() 之前有某些东西（例如，'\28'）时，就会出现问题。我不确定是什么导致了这种奇怪的行为。

故障排除 到目前为止，我已经重新排列了内容样式的元素，并且问题似乎仅在 counter() 前面有某些内容时出现。更改内容指令中的间距无效。如果两个指令在一行或两行上，则删除然后添加类的 jQuery 的反应完全相同；此外，添加延迟没有任何作用。

一些代码 CSS 示例

.zlist-upper-roman-parens ol {
    list-style: none;
    counter-reset: zlist-upper-roman-parens;
}

.zlist-upper-roman-parens ol li:before {
    content: '\28'counter(zlist-upper-roman-parens, upper-roman)'\29';
    counter-increment: zlist-upper-roman-parens;
}

jQuery 示例

$("#zlist-upper-roman-parens").click(function () {
    $("#zlist-example-displayer2").removeClass()
    $("#zlist-example-displayer2").addClass("zlist-upper-roman-parens");
});
4

0 回答 0