带有计数器标识符“list-item”的奇怪浏览器行为

2024-04-11

TL;DR

不要为您的柜台命名list-item


Issue:

CSS计数器比较容易理解,嗯有记录的 http://%20https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters并有良好的浏览器支持 https://caniuse.com/#feat=css-counters.

然而,我遇到了他们意想不到的行为,我不明白,我想知道为什么会发生这种情况。可能只是浏览器中的错误......

在下面的示例中,我们可以看到计数器按预期工作:

ol {
  list-style-type: none;
  counter-reset: list-counter;
}

ol>li {
  counter-increment: list-counter;
}

ol>li:before {
  content: counter(list-counter) '. ';
}
<ol>
  <li>n</li>
  <li>n</li>
  <li>n</li>
  <li>n</li>
</ol>

<ol>
  <li>n</li>
  <li>n</li>
  <li>n</li>
</ol>

<ol>
  <li>n</li>
  <li>n</li>
</ol>

但是当将计数器的标识符更改为list-item,我们可以看到它在不同浏览器中的表现有所不同:

ol {
  list-style-type: none;
  counter-reset: list-item;
}

ol>li {
  counter-increment: list-item;
}

ol>li:before {
  content: counter(list-item) '. ';
}
<ol>
  <li>n</li>
  <li>n</li>
  <li>n</li>
  <li>n</li>
</ol>

<ol>
  <li>n</li>
  <li>n</li>
  <li>n</li>
</ol>

<ol>
  <li>n</li>
  <li>n</li>
</ol>

虽然在 Chrome 和 Firefox 中它仍然按预期工作,但在 Edge 和 Internet Explorer 11 中它从 2 开始计数并递增 2,而在 Safari 中它从 0 开始计数但仍然递增 1。

例如,当注释掉counter-reset财产。然后 Safari 会正确计数,但 Chrome 从 2 开始计数。当注释掉时counter-incrementChrome 和 IE/Edge 计数正确,尽管它们实际上应该显示 0。

在玩这个时,不同的浏览器中还会有更奇怪的行为,而这一切只有当标识符是list-item.

当我最初遇到这个问题时,未经进一步调查,我的第一个假设是它至少与display适当的价值list-item。正如 MDN 所说:

list-item 关键字使元素生成 ::marker 伪元素,其内容由其列表样式属性指定 (例如要点)连同主框 为其自身内容指定类型。

See: https://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem https://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem

但由于我找不到任何关于此的进一步文档,我想知道不同的供应商如何实现这样的类似错误......

问题:

这里有我真正想念的东西吗?规范中是否有标识符的保留字?有什么特别之处吗list-item?

在 W3C 规范中我找不到任何相关内容:

https://www.w3.org/wiki/CSS/Properties/counter-increment https://www.w3.org/wiki/CSS/Properties/counter-increment

https://www.w3.org/wiki/CSS/Properties/counter-reset https://www.w3.org/wiki/CSS/Properties/counter-reset


附加信息:

为了完整起见,这里是使用的版本:

  • Chrome 70.0.3538.110 MacOS 莫哈韦 10.14.1
  • Chrome 70.0.3538.110 Windows 10 17134.407
  • 边缘 17.17134 Windows 10 17134.407
  • 火狐 63.0.3 MacOS 莫哈韦 10.14.1
  • 火狐 63.0.3 Windows 10 17134.407
  • Internet Explorer 11.407.17134.0 Windows 10 17134.407
  • Safari 12.0.1 MacOS 莫哈韦 10.14.1

加布里埃莱·佩特里奥利猜对了。list-item是一个内置计数器,定义在css-lists-3 规范 https://drafts.csswg.org/css-lists-3/#declaring-a-list-item,其描述如下:

[...] 列表项会自动增加特殊的“列表项”计数器。除非“counter-increment”属性手动为“list-item”计数器指定不同的增量,否则每个列表项都必须加 1,同时计数器通常会递增。 (这对“counter-*”属性的值没有影响。)

该计数器未在 CSS2 中定义,因此对于 css-lists-3 来说是新的。但实际上它真的很老了——至少 16 岁 https://www.w3.org/TR/2002/WD-css3-lists-20020220/#declaring,无论如何,可以追溯到 CSS3 规范的 FPWD。总的来说,列表和计数器样式在 CSS3 中得到了显着的升级,这意味着“CSS 计数器相对容易理解、文档齐全并且具有良好的浏览器支持”这一说法。随着新规范的最终确定和采用,可能会暂时不再适用;)我不确定是实现还是规范先出现,但大概是添加了实现,因为几乎没有人使用list-item作为当时的计数器(2002 年,当 IE6 还是全新的时候,CSS2 的采用还远未普及)。

尽管该功能本身已在规范中存在了十多年,但仍处于悬而未决的状态 https://github.com/w3c/csswg-drafts/issues/2464#issuecomment-375492907预计还不会出现互操作。无论如何,你的建议是合理的:不要命名你的柜台list-item。事实上,它是计数器的一个特殊关键字值,由于上述互操作问题,在作者 CSS 中使用时会产生意想不到的结果。

请记住,W3C Wiki 并不是“W3C 规范”,尽管它是由 W3C 维护的。这些规范是工作草案、候选建议、拟议建议和在 w3.org 中作为 TR 找到的建议,或者在 dev.w3.org 中或相应工作组决定托管其 ED 的任何地方的编辑草稿。属性的 wiki 页面通常不包含实际规格中存在的任何技术细节,因此如果您只查看那里,您将错过很多这些细节。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带有计数器标识符“list-item”的奇怪浏览器行为 的相关文章

  • CSS 底部边框悬停“抖动”

    我有一个导航栏 当您将鼠标悬停在导航按钮上时 我想给它一个橙色的底部边框 唯一的问题是 每当您悬停时 边框都会使内容 导航按钮 抖动 这是不应该的 另外 我的导航栏上已经有一个黑色的底部边框 因此无法更改它 HTML div ul li a
  • CSS 主体宽度未填充 100%

    我正在开发一个网页 我注意到这个问题 Please post anything you get in mind it will be very helpful 检查网站here http dev mariachi com br europe
  • 在 Selenium 中自动执行下拉菜单而不选择

    我正在尝试使用 Selenium 从下拉列表中选择一个元素 我已经能够选择下拉列表 但我不知道如何从下拉列表中选择特定元素 因为该网站不使用 select 因此我无法使用内置的 select 类 作为参考 这是下拉列表中元素之一的 HTML
  • CSS 字体显示功能是什么?

    对于我的网站 我从 Google 的 PageSpeed Insights 获得以下反馈 利用字体显示 CSS 功能确保加载 Web 字体时文本对用户可见 这意味着什么 CSS font display允许您控制网络字体在加载时 加载后如何
  • 尝试将星号添加到必填输入字段

    我想我不太明白 before and after因为我无法让这个工作 我只是想在表单中的必填字段后添加一个星号 我的代码很简单
  • Jquery - Fancybox - 后台页面移位问题

    Fancybox 加载良好 所有内容都按照我想要的方式打开 但问题发生在后台 可以看到 并且令人不安 当盒子加载并返回到盒子上的正常位置时 我的整个页面向右移动了 8 个像素关闭 我无法链接到该网站 因为它位于我们公司防火墙后面的开发服务器
  • Codemirror光标位置偏移

    我正在使用代码镜像在网页中显示 突出显示和编辑 xml 但我遇到了光标位置偏离插入位置的问题 因此 如果从闪烁光标所在的位置删除字符 则删除之前的字符您期望的那个会被删除 我假设它与我当前页面存在 css 冲突 因为它在我的页面之外运行良好
  • 溢出-x 不工作

    我正在尝试为我的画廊实现一个滑块 目前 CSS 存在溢出 x 无法正常工作的问题 我想要一个水平滑块而不是垂直滚动 这是fiddle http jsfiddle net nevinm 6H43f 请务必看一下 testimg height
  • 如何在 Quill(富文本编辑器)中检测和修剪前导/尾随空格?

    如何检测并删除前导 尾随空格Quill https quilljs com 哪个是富文本编辑器 例如 样本HTML下面代表Quill文本的输出 nHi 我们想要检测并删除由以下命令创建的每个文本块的前导和尾随空格Quill 不适用于整个文档
  • 在 jQuery Mobile 中设置 Listview
  • 高度
  • 我正在尝试调整大小 li 在我的 jQuery 移动网站 listview 中 似乎无法在 CSS 中找到合适的类来执行此操作 我基本上调整了一些元素的大小 页眉和页脚等 我有五个 li li 按钮垂直堆叠 按钮和页脚下方有间隙 我只想设置
  • 使用 CSS 显示 div 内容后淡出

    我正在尝试在单击按钮时显示通知 单击按钮实际上会检查电子邮件验证 我知道要显示一个包含错误消息内容的 div 但是 我想淡出错误消息 比如说 5 秒后 我想用CSS来实现它 以下是我的尝试 它只是隐藏了一切 signup response
  • 带有边框半径的CSS中的完美圆不起作用

    圆往往是椭圆形的 我想要的是完美的圆 border radius 100 不起作用我想知道为什么 http jsfiddle net 8gD2m 1 http jsfiddle net 8gD2m 1 badge display inlin
  • HTML/CSS 水平导航子菜单悬停显示错误

    我正在创建一个带有水平导航和垂直子菜单的 HTML 页面 一切工作正常 除了子菜单上的悬停显示在实际菜单项的左侧 看我的jsfiddle https jsfiddle net qmcte349 https jsfiddle net qmct
  • 如何为带有标题图像的移动设备设置 HTML,该图像占据浏览器的整个宽度?

    我担心的是我必须为移动设备建立一个网站 概念中是将图像设置为标题 现在的问题是 不同的智能手机具有不同的显示分辨率 有例如840x560 480x320 或 800x480 我必须编写什么元标签 CSS 等才能使 每个 现代智能手机中的图像
  • 转换为 PDF 后,Flex 布局中的 HTML 表格变得重叠

    尝试使用将 html 文件转换为 pdfweasyprint 但由于bug https github com Kozea WeasyPrint issues 1805 in weasyprint 我不能使用flex布局 因为它与第一行中的两
  • Position:fixed 内的position:fixed: 哪个浏览器是正确的?

    将固定元素放置在另一个固定元素内的行为在 Chrome Safari 与 Firefox 中有所不同 这个答案很好地解释了预期的行为 https stackoverflow com a 28576596 1437016对于相对 div 内的
  • 标题的固定高度和更改宽度(HTML 表格)

    我需要确保表格标题的高度是固定的 并且宽度是根据标题单元格内容进行调整的 标题文本最多显示两行 我们如何使用样式来做到这一点 另外 我想确保表行的宽度与标题行的宽度相同 即标题行决定宽度 注 目前 交易部门负责人别名 是按行排列的 它需要分
  • 使用过渡添加子项时 div 的平滑增长

    尽管使用了以下代码 但其行为并不符合我的预期transition所以可能有些事情我不明白 理想情况下 单击该按钮会将一个子项添加到id2div 并制作id1分区增长smoothly因此 function id1 button click g
  • 如何以“打印”模式查看 Google 地图?

    我正在使用 Google Maps API v2 并且希望能够像 Google 在其地图页面上那样打印地图 您可以单击小打印机图标 它会创建一个具有相同地图的新弹出窗口 但所有不可打印的内容 如控件 都会被删除 我知道他们使用 media
  • 使 div 的大小与其内部图像的大小相同

    我有一个带有以下代码的div HTML div img src img logo png div CSS div imgContainer width 250px height 250px padding 13px 问题是用户可以编辑图像大

随机推荐