1

私は非常に単純な HTML ページを持っています (XHTML 1.0 Strict として検証されます):

<div class="news-result">
    <h2><a href="#">Title</a></h2><span class="date">(1-1-2009)</span>
    <p>Some text...</p>
</div>

次の CSS を使用します。

.news-result {
    overflow: hidden;
    padding: 30px 0 20px;
}

.news-result h2 {
    float: left;
    margin: 0 10px 0 0;
}

.news-result span.date {
    margin: 1px 0 0;
    float : left;
}

.news-result p {
    padding: 3px 0 0 0;
    clear: left;
}

このページを IE6 または FF3 でレンダリングすると、完全にレンダリングされます (タイトルと日付が 1 行に表示され、その後に段落が続きます)。ただし、IE7 では、タイトルと日付、および段落の間に大きなスペースがあります。

すべての要素のすべてのマージンとパディングをクリアする簡単なリセットがあります。

zoom: 1段落の設定やコンテナーの削除と同様に、日付要素のフロートを削除すると、この問題が解決しますoverflow: hiddenが、すべてが理想的ではありません。float の後に段落が続くのはなぜですか? IE7 でのみ、この追加の上マージンがトリガーされるのはなぜですか?

4

4 に答える 4

4

あなたがドキュメントタイプを持っていると仮定できますか?

ただし、h2 とスパンを次のように変更します。問題も解決するはずです。

編集 --- hasLayout を追加

インラインが常にオプションであるとは限らないことを理解してください。何が起こっているのかを説明する記事です。

基本的に、<p>hasLayout を指定する必要があります。これを行うには多くの方法があります<div class="clearall"></div>。overflow: hidden;zoom: 1;

于 2009-01-07T17:12:11.730 に答える
2

IE6、7、および 8B2 で余分な空白が表示されます。

<p>IE では、タグにゼロ以外のトップ マージンが適用されているようです。

次の変更を加えることで、IE の空白を削除できました。

.news-result p {
    margin-top: 0;
    padding: 3px 0 0 0;
    clear: left;
}

この変更は、Firefox 2 または 3、Opera 9.63、または Safari for Windows 3.2.1 では悪影響を及ぼさなかったようです。

于 2009-01-07T17:06:44.173 に答える
1

&nbsp;フロートDIVとクリアリングDIVの間に追加するだけです。それはギャップを取り除きます。

于 2012-07-30T13:51:36.160 に答える
0

IE7 はまだ フロート バグなので、残念です。

（リンク先を修正）

于 2009-01-07T17:14:35.920 に答える