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 に答える