0

FirefoxとIEの垂直方向の間隔に、恥ずかしいほど長い間問題がありました。

cssでセレクターを使用して*、特定のコンテナー要素内のすべてにマージンを適用しています。Chromeでは問題なく動作しますが、FFとIEでは、http： //jsfiddle.net/XrVXF/3/で確認できるように、どこからともなく不思議な余分なパディングが発生していました。

私には2つの別々の問題があったことがわかりました。1つは、Chrome以外のブラウザーがセレクターで要素を選択し*、マージンを適用すると、マージンがブラウザーに表示されることです。要素はFirebugのようなものには見えませんが。これはバグと見なされるべきですか？あなたは、bodyタグ内でリンク要素が行っているビジネスとは何かを尋ねているかもしれません。まあ、私はおそらくそれを避けることができましたが、それは私のサイトでいくつかのことをする最も簡単な方法です。このページでは、*セレクターは私が使用しているHTML5のブロックレベルの要素にのみ適用する必要があると述べています。その意味で、Firefoxは少なくともバグアウトしているように見えます。また、IEも適切なHTML5をサポートしているはずです。 。これを知ったので、回避できますが多分私も心配しなければならない他の要素がありますか？（スクリプトタグやスタイルタグには適用されないようです。）HTML要素の大きなリストにマージンを適用するのではなく、マージンを適用する方がよいでしょう*か？

私がリンクしたフィドルで観察できるもう1つの奇妙なことは、下部のクリアフィックス（例では必要ありませんが、私のサイトにあります）もマージンを取得し、FFとIEに適用しますが、 Chromeで。「正しい」行動はどれですか？不思議なことに、overflow：hiddenをオフにすると、clearfixがスペースを占有するのを防ぎ、サイトに悪影響を及ぼさないように見えることに気付きました。オーバーフローは何のために非表示に設定されていますか？

訂正：おっと、.clearfix（フロートされたものの後にコンテンツを追加する）を使用するつもりだったときに.clearを使用していました。これは正常に機能しているようで、マージンの問題はありません。

4

1 に答える 1

2

これはバグと見なされるべきですか？

そもそもあるべきではない場所（???）にある要素にスタイルを適用していることを考えるとlink、bodyこれは誰の推測でもあります。それらがFirebugに表示されない理由として考えられるのは、Firebugがそれらが存在することを期待していないためです。

すべての深刻さにおいて、あなたのフィドルで何が起こっているかについての私の最もよい推測は次のとおりです：

  • linkChromeには、要素のUAスタイルがありますdisplay: none。要素に属し、ではない他の要素についても同じことを行うと思いheadますbody。

  • 他のブラウザには要素のデフォルトdisplayのスタイルがなくlink、代わりに要素に属するすべてのものも非表示にheadする必要があります。したがって、内に配置すると、初期値の。で表示されるため、マージンで表示されます。display: noneheadlinkbodydisplay: inline

    FWIW、スタイルを指定するdisplay: blockと、マージンが折りたたまdisplay: noneれ、Chromeの場合と同じように見える効果があります。

繰り返しになりますが、これはフィドルの無効なマークアップに基づいているため、ページヘッドをレンダリングしないように指定されているため、どのブラウザが正しいか間違っているかはわかりません。*また、これがセレクターを使用しない理由なのか、無効なHTMLを記述しない理由なのか、あるいはその両方なのかについて、議論/討論を行います...

于 2012-08-25T23:05:52.067 に答える