html - CSS 计数器无法在 Internet Explorer 中用于隐藏内容 - 如何修复？

Question

我们想要一些带编号的列表，并发现了这个很酷的计数器，你可以在你的 css 中使用它来让浏览器为你计算数字:

ol.instructions {counter-reset:instructions-section;}
ol.instructions > li:before {
    content:counter(instructions-section); 
    counter-increment:instructions-section;
}

我们正在制作的 html 包含指令集页面，每组指令从 1、2、3 依此类推。一次只有一组可见，当您单击标题时会显示该组并隐藏其他组。

它就像一种款待，我们一直面带微笑地坐在那里，直到有人想到在 Internet Explorer 8 中测试它，我们遇到了一些史诗般的 Microsoft 风格的怪事。当通过单击调出一组时，所有数字均为零 (0)。

我用谷歌搜索并找到了 this page - 它很好地描述了问题(它是使用 :hover 和隐藏内容中使用的 css 计数器逻辑的组合)，但给出了一个不太令人满意的解决方案 - 我希望能够继续使用 css 计数器并实现一些特定于 ie8 的 hack，以某种方式使页面更新数字。我很难在互联网上找到有关此问题的其他资料。

我的特定页面将描述零，直到我将鼠标指针移动到包含编号列表的 div 中，此时数字将神奇地自行修复。有什么我可以“插入”页面相信鼠标悬停在元素上的东西吗？还是有更合适的解决方案？

Answer 1

我遇到了同样的问题。一旦元素可见，我就可以通过使用 JavaScript 应用 padding-left 0 的内联 CSS(已经没有左填充)来修复它。这似乎使 IE“重绘”元素。