是否“显示:标记”在任何当前浏览器中都可以工作,如果可以,如何工作?

StackOverflow https://stackoverflow.com/questions/50170

  •  09-06-2019
  •  | 
  •  

我不确定我的代码是否很糟糕,或者只是浏览器还没有跟上规范。

我的目标是使用生成的内容模拟列表标记,以便获得例如纯 CSS 中计数器从一个列表到另一个列表的延续。

所以下面的代码,我 思考 根据是正确的 规格, ,是这样的:

html {
  counter-reset: myCounter;
}
li {
  counter-increment: myCounter;
}
li:before {
  content: counter(myCounter)". ";
  display: marker;
  width: 5em;
  text-align: right;
  marker-offset: 1em;
}
<ol>
  <li>The<li>
  <li>quick</li>
  <li>brown</li>
</ol>
<ol>
  <li>fox</li>
  <li>jumped</li>
  <li>over</li>
</ol>

但这似乎不会在 FF3、Chrome 或 IE8 beta 2 中生成标记,如果我没记错的话,在 Opera 中也不会生成标记(尽管我已经卸载了 Opera)。

那么,有谁知道标记是否 应该 上班?Quirksmode.org 在这方面并没有像往常一样提供帮助:(。

有帮助吗?

解决方案

显然,marker 是在 CSS 2 中作为一个值引入的,但由于缺乏浏览器支持而没有进入 CSS 2.1。我认为这并没有帮助它的受欢迎程度......

来源: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display (德语)

其他提示

哦哦,不知道:-|。那么,这可能会密封它的情况。因为大多数时候我的假设是现代浏览器肯定应该支持这样一个基本的 CSS2 属性,但如果它没有进入 CSS 2.1,那么它不支持就更有意义了。

为了将来参考,它不显示 在 Mozilla 开发中心, ,所以推测 Firefox 根本不支持它。

也为了将来的参考,我得到了我原来的例子来使用 inline-block 反而:

li:before
{
    content: counter(myCounter)". ";
    display: inline-block;
    width: 2em;
    padding-right: 0.3em;
    text-align: right;
}
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top