显示:列表项在 Firefox 中无法正常工作?
我很确定它在某个地方有记录,但我的谷歌搜索和查看 mdn 并没有给我任何实质性的信息。
考虑下面的例子:
<doctype html>
<html>
<head>
<title>Array test</title>
</head>
<body>
<style scoped>
div {
margin: 20px;
padding: 20px;
display: list-item;
list-style-type: decimal;
}
</style>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</body>
</html>
如果你在 Chrome 或 safari 或任何我能拿到的 webkit 浏览器中渲染它,div 的编号将是 1、2、3、4。但在 Firefox 中,所有项目都将为 0。
有没有办法围绕这个?在纯 CSS 中?
TIA
I'm pretty sure it's documented somewhere, but my Googling and looking at the mdn didn't give me anything substantial to go on.
Consider the following example:
<doctype html>
<html>
<head>
<title>Array test</title>
</head>
<body>
<style scoped>
div {
margin: 20px;
padding: 20px;
display: list-item;
list-style-type: decimal;
}
</style>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</body>
</html>
If you render it in Chrome or safari, or any webkit browser I could get my hands on the div will be numbered 1, 2, 3, 4. But in Firefox all items will be 0.
Is there a way around this? In pure CSS?
TIA
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果你想使用纯 CSS 解决方案,你可以显式使用 CSS 计数器,对吗?
If you want to use a pure CSS solution, you could explicitly use a CSS counter, right?
我发现了 帖子和网站(L部分)注意到这一点是(一直是)Firefox 中的一个错误。
我发现的唯一解决方案是
div
项必须用ol
包裹: http://jsfiddle.net/Rvux3/3/,当然,这不是一个纯 CSS 解决方案,也不会验证(您也可以使用li
项目,如果您打算有ol
)。I've found a post and a site (Section L) that note this to be (has been) a bug in Firefox.
The only solution I have found is that the
div
items must be wrapped by anol
: http://jsfiddle.net/Rvux3/3/, which, of course, is not a pure CSS solution, nor would it validate (you might as well useli
items if you are going to have theol
).