css计数器不能在Internet Explorer中为隐藏内容工作 - 如何解决？ [英] css counter not working in internet explorer for hidden content - how to fix?

问题描述

我们想要一些编号列表，并发现这个很酷的反面东西，你可以在你的CSS中使用，让浏览器为你计算数字：

  ol.instructions {counter-reset：instructions-section;} 
 ol.instructions> li：在{
 content：counter（instructions-section）之前; 
 counter-increment：instructions-section; 
 
 
 
 
 
 $ b我们制作的html包含指令集页面，每个集合编号为1,2,3等。一次只能看到一个集合，当你点击一个显示设置并隐藏其他标题的标题时。
 
 
 
它像一种享受，我们坐在那里带着微笑直到有人想到在Internet Explorer 8中测试它，我们遇到了一些史诗般的微软风格怪异。当点击提出一个集合时，所有数字都是零（0）。
 
 
 
我搜索了一下，发现这个页面  - 它很好地描述了这个问题（它是使用：隐藏内容中使用hover和css计数器逻辑），但给出的解决方案不尽如人意 - 我希望能够继续使用css计数器，并实现一些ie8特定的hack，以某种方式使页面更新数字。我很难在互联网上找到关于这个问题的其他信息。
 
 
 
直到我将鼠标指针移动到包含编号列表中，此时数字将自动修复。有什么我可以推动页面相信鼠标悬停在元素上？或者是有更合适的解决方案？
解决方案
我有同样的问题。一旦元素可见，我就可以通过使用JavaScript来应用内嵌填充的CSS-left 0（已经没有左填充）。这似乎使IE'重绘'元素。  
We wanted some numbered lists and found this cool counter thing you can use in you css to have the browser calculate numbers for you:
ol.instructions {counter-reset:instructions-section;}
ol.instructions > li:before {
    content:counter(instructions-section); 
    counter-increment:instructions-section;
}
The html we're making contains pages of instruction sets, each set numbered from 1,2,3 and so on. Only one set is visible at a time, when you click a header you show that set and hide the others.

It worked like a treat and we were sitting there with smiling faces until someone thought of testing it in Internet Explorer 8, where we ran into some epic Microsoft-style weirdness. When a set was brought up by clicking, all the numbers were zero (0).

I googled around and found this page - it describes the problem fairly well (it's a combination of using :hover and css counter logic used in hidden content), but gives a solution that is less than satisfactory - I would love to be able to keep using the css counters and just implement some ie8-specific hack that somehow makes the page update the numbers. I'm having a hard time finding other stuff on the internet about this problem.

My particular page will describe zeroes until I move the mouse pointer into the div that contains the numbered list, at which point the numbers will magically fix themselves. Is there something I could to "nudge" the page into believing that a mouse is hovering over the element? Or is there a more proper solution?
解决方案
Ive had the same issue. I was able to fix it by using JavaScript to apply inline CSS of padding-left 0 (there was already no left padding) once the element was visible. This seems to make IE 'redraw' the element.  

                        
这篇关于css计数器不能在Internet Explorer中为隐藏内容工作 - 如何解决？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！