3

我们想要一些编号列表，并找到了这个很酷的计数器，你可以在你的 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)。

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

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

4

2 回答 2

1

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

于 2015-10-13T15:01:22.213 回答
0

如果按照建议，“隐藏”导致了问题，那么您可以尝试通过使用这段 CSS 将其移出屏幕来“隐藏”内容：

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

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

于 2014-02-04T19:30:24.663 回答