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中测试它，在那里我们遇到了一些史诗般的微软式怪异。当点击一组时，所有数字都为零（0）。

我用Google搜索并发现this page - 它很好地描述了问题（它是使用隐藏内容中使用的悬停和css计数器逻辑的组合），但是给出了一个不太令人满意的解决方案 - 我会喜欢能够继续使用css计数器，并只是实现一些ie8特定的黑客，以某种方式使页面更新数字。我很难在互联网上找到关于这个问题的其他内容。

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

Answer 1

如果按照建议“隐藏”导致问题，那么您可以尝试“隐藏”内容，而不是通过这条CSS将其移出屏幕：

.hide {
  position:absolute;
  left: -1000px;
}

我使用了链接到文档的代码示例来显示可能的解决方案：http://codepen.io/akademy/pen/LDhGl

Answer 2

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