2

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

我的目标是使用生成的内容来模拟列表标记,以便在纯 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 并没有像往常一样乐于助人:(。

4

2 回答 2

3

显然,标记是在 CSS 2 中作为值引入的,但由于缺乏浏览器支持而没有进入 CSS 2.1。我想这无助于它的受欢迎程度……</p>

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

于 2008-09-08T17:15:04.373 回答
1

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

为了将来参考,它没有出现在 Mozilla Development Center中,所以大概 Firefox 根本不支持它。

另外为了将来参考,我得到了我原来的例子来inline-block代替:

li:before
{
    content: counter(myCounter)". ";
    display: inline-block;
    width: 2em;
    padding-right: 0.3em;
    text-align: right;
}
于 2008-09-08T17:47:52.457 回答