2

CSS

text-indentに負の値を適用するための簡単なCSSがいくつかありliますul：

<style type="text/css">
    ul.indent li { text-indent: -20px; padding-left: 20px; }
</style>

<!--[if lte IE 8 ]>
<style type="text/css">
    ul.indent li { text-indent: -20px; padding-left: 0; margin-left: 20px; }
</style>
<![endif]-->

Internet Explorer 8以下では、リストアイテムの余白とパディングの処理が最新のブラウザーとは異なるため、IE8以下の条件付きコメントを使用して、さまざまなパディングと余白の値を適用しています。（補足：条件付きコメントを使用せずに一貫したマージン/パディングを取得するためのユニバーサルなクロスブラウザーCSSソリューションを知っている人は、私はすべての耳です。IE6以降、Chrome、Firefox、Safari、およびOperaをサポートする必要があります。 ）。

HTML

これは私のHTMLです：

<ul>
    <li>Lorem ipsum...</li>
</ul>

<ul class="indent">
    <li>Lorem ipsum...</li>
</ul>

最初のリストは（実験のコントロールとして）完全にスタイルが設定されておらず、2番目のリストは上記で定義されたCSSクラスを使用しています（class="indent"）。

結果

問題は次のとおりです。上記のHTML/CSSは、IE8を除くすべてのブラウザーで一貫した結果を生成します。これは私がブラウザで見ているものです：

すべてのブラウザとIE8

IE6、IE7、IE9、Chrome、Firefox、Safari、Operaの左側に何があるかわかります。

IE8の右側に何があるかわかります。赤で強調表示されている領域に注目してください。負のテキストインデント値がCSSに追加されるとすぐに、IE8はリストアイテムの箇条書きとリストアイテムのテキストの間に余分なピクセルの束を投げるように見えます。

IE8がこれらの余分なピクセルを追加しないようにするにはどうすればよいですか？

ここで実際のコードを見ることができます：http：//jsfiddle.net/Kxb8v/

4

1 に答える 1

1

UL要素とLI要素はブロックレベルの要素です...それがおそらくブラウザレベルで予測できない理由です。そのテキストをapタグでラップしてから、テキストインデントを適用するのはどうでしょうか。これは、ブロックレベルの要素を対象としていないためです。

<style type="text/css">
    .indent { text-indent: -20px; padding-left: 20px; }
</style>


<ul>
    <li><p class="indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis mi sit amet mauris varius ut viverra magna eleifend. Aliquam viverra, magna sed mollis adipiscing, libero mi adipiscing ante, ut hendrerit lacus leo id elit. Nulla commodo mi nec nulla ornare congue.</p></li>
</ul>

編集

ですから、私の回答が不明確だった場合に備えて...リストアイテムは、テキストを含む以外にも多くの目的で使用されます。一部のサイトでは、レイアウトにそれらを使用しています。リストアイテムには、各リストアイテムに使用される画像を制御できるリストスタイルなどのパディングとプロパティもあります。

したがって、それがわかっているので、リスト項目にテキストインデントを要求することはいくつかの方法で処理できるように思われます。含まれているテキストをインデントすることも、画像を含むリストアイテム自体をインデントすることもできます;）この決定はブラウザに任されているため、バージョン間で異なる方法で処理される可能性があります。

それが私がそれでどこに向かっていたのかを明確にするのに役立つことを願っています。

于 2012-06-14T20:07:47.640 に答える