contentプロパティでコンテンツを追加する(3):FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008-07-28 17:50:01
  • このエントリーをはてなブックマークに追加

 このサンプルをInternet Explorer 8(ベータ版)で表示すると次のようになる。しかし、番号の表示がおかしくなっていることがわかる。

Internet Explorer 8(ベータ版)での表示 Internet Explorer 8(ベータ版)での表示

 この問題を回避するには、

の親要素であるに対して「counter-reset: section」と指定する。counter-resetはカウンターを「0」にリセットするプロパティで、FirefoxやSafari、Operaの表示に影響を与えることはない。

Internet Explorer 8(ベータ版)での表示 Internet Explorer 8(ベータ版)での表示
body{
counter-reset: section;
}

h1:before{
content: counter(section);
}

h1{
counter-increment: section;
}
ブラウザで表示を確認する

 ここからはInternet Explorer 8(ベータ版)を利用して表示を確認していこう。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]