私はこのデモを準備しました： https ：//dl.dropbox.com/u/7224702/lists-bug.html
Firefox、Chrome、IE8では正常に動作しますが、OperaとIE9では機能しません。
ああ、私はlist-style-positionを使いたくありません。一部の<li>が1行より長い場合、2行目は正しくインデントされないためです。
質問する
382 次
3 に答える
2
これは、CSSで実際に指定されていないリストの問題です。マーカーがボックスの外側にあることを示しているだけですが、場所を正確に指定していません。
おそらくtext-indent、最初の行を再び戻すことで解決できます。
于 2012-06-16T11:19:10.867 に答える
1
それは私もしばらくの間悩まされてきた質問です。
まず、list-style-position: outsideプロパティを記述した仕様を見ると、
「CSS 2.1 では、マーカー ボックスの正確な位置や描画順序における位置が指定されていません」。
これにより、実際にはこの状況はバグではなく、実装が異なるだけです。
IMO Opera と IE9 は、仕様に近づけます。これは、マーカーを配置することです...まあ...箱の外に。float の場合、li要素によって作成されたボックスは全幅のままで、コンテンツのみがその中でシフトされます。
別の解決策を考えてみましたが、それでも不適切であり、解決するよりも多くの問題を引き起こすことが判明しました。css3カウンター インクリメントの使用例はhttp://jsfiddle.net/s3sZS/3/で見ることができますが、視覚的にはlist-style-position: inside(インデントの問題が残っている) ように見え、インクリメント自体は選択可能でコピー可能です (少なくとも Opera では)。 .
実際list-style-position: inside、このimoに対する唯一の適切な解決策のように見えます。
リストの将来の実装に興味がある場合は、CSS Lists and Counters Module Level 3 (現在は編集者のドラフト) を読むことができます。
于 2012-06-16T11:24:43.860 に答える
0
少し遅れて計画されましたが、これが私の最終的な解決策です。
- list-style-position: inside; を使用します。
- 2 行目以降のインデントを修正するには、負のテキスト インデントを使用します (Joey さんに感謝します!)。
- ブラウザーごとに動作が少し異なるため、負のテキスト インデントの正しい値を決定するのは簡単ではありません。マーカーの幅を手動で設定できるものを使用する必要があることを知っています。そして、それは疑似要素 :before です。(skip405 に感謝!)
- content プロパティの :before 疑似要素と正しい値により、list-style-type: none; を使用できるようになりました。
- 1. の list-style-position は不要になったので削除します。
ここで実際のデモを見ることができます: https://dl.dropbox.com/u/7224702/lists-counters.html
唯一の欠点はコンテンツにあります: counter(list, disc); Opera 12 では、円盤/円/正方形の値が正常に機能しません。小数などの値は問題ありません。すでにバグとして報告済みなので、次のバージョンで修正されることを願っています。
于 2012-06-19T11:38:32.533 に答える