2

問題：順序付けされていないリストアイテムの上にスペースがあります。このスペースはFirefox18.0.1に表示されます

HTML： 

<ul>
<li>
    <a href="">
        <h3>Lorem ipsum</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content</p>
    </a>
</li>
<li>
    <a href="">
        <h3>Lorem ipsum</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content</p>
    </a>
</li>
<li>
    <a href="">
        <h3>Lorem ipsum</h3>
        <p>It is a long established fact that a reader will be distracted by the readable content</p>
    </a>
</li>

CSS：

ul {
    list-style: square;
    margin-left: 20px
}

ワーキングデモ：http ： //jsfiddle.net/vpdd7/

4

2 に答える 2

4

h3これは、リストスタイルがやなどのブロック要素の前にある/含まれているインライン要素と衝突する問題のようpです。この問題は、次の場合には発生しません。

この動作がFirefoxのバグなのか、他のブラウザのバグなのかを判断するCSS2.1仕様には何も見つかりません。実際、の下では、要素自体（主ボックス）またはその子のいずれかlist-style-positionによって作成されたボックスに関しても、マーカーボックス（箇条書きを含む）の正確な位置またはレイアウトは定義されていないことを示しています。li

状況を考えると、3番目のオプションは、レイアウトをそれほど損なうことのない最善の回避策である可能性があります。とにかくリストアイテムの内容全体をリンクに変えるつもりなら、それをブロックとして表示するのもよいでしょう。そうすれば、すべてが安全にブロックボックスに含まれ、そのレンダリングは非常に明確に定義され、完全に信頼できます。

于 2013-01-26T10:31:04.730 に答える
-1

h3要素はブロック要素として表示されます。これは、ブラウザウィンドウの幅全体を占め、上下にスペースがあることを意味します。ドキュメントの流れを妨げないように、インライン要素として表示するようにh3タグを変更する必要があります。次のように、ブロック要素をインライン要素に変更できます。

CSS：

  h3{
      display:inline;
  }

これが更新されたjsFiddleです

于 2013-01-26T10:30:04.847 に答える