html - 具有使用嵌套列表元素的章节段的灵活进度条在 Webkit 浏览器中不起作用

Question

我为一个在线教育网站创建了一个灵活的进度条，它分为章节和章节段。它必须在现代浏览器中具有灵 active ，因为该元素将具有响应能力。

这是一个 fiddle :http://jsfiddle.net/zyCkW/7/

我想要实现的是章节列表元素以 0 像素宽度折叠，而 child <li>元素(章节段)使用整个#progressbar 的一定百分比向左浮动。如果我让章<li>元素也 float 或给它们 25% 的宽度，这些段将不会使用 #progressbar 的宽度并变得更小。

问题:

我写的东西在 IE7-9、Firefox 和 Opera 中运行良好，但不幸的是在 Webkit 浏览器(Chrome/Safari)中不行:章节描述都位于左侧，而不是像预期的那样位于第一章片段的开头.我想 Webkit 是唯一能正确处理它的浏览器……即使我欣赏其他浏览器的结果。

有没有我可以在 Webkit 中解决这个问题的解决方案，最好不要使用 Javascript？

Answer 1

我通过使用 :nth-child 伪选择器定位剩下的章节描述来解决这个问题。

#progressbar ol>li:nth-child(2) span { left: 23.076%; }
#progressbar ol>li:nth-child(3) span { left: 53.844%; }
#progressbar ol>li:nth-child(4) span { left: 76.92%; }

如果可能的话，我仍然很感激任何更好的解决方案。