問題タブ [haslayout]

私は、ネストされた p、div、および li を持つ ol を持つページに取り組んでいます。Internet Explorer 6 と 7 は両方とも、ol タグの数字を、予想どおり最も外側の li の上部ではなく、最後 (li タグの一番下) の p 要素の後にレンダリングします。私は PowerPC Mac で作業していて、テストを行うことができません。これを Firefox と同じようにレンダリングする簡単な CSS ハックはありますか?

ライブページはこちらからご覧いただけます。サイドバーの配置に取り組んでいます。今は無視してください。

マークアップは次のとおりです。

そしてCSS：

hasLayoutInternet Explorer の Web サイトで作業している多くの開発者と同様に、悪名高いフラグが原因である多くのバグに遭遇したようです。

このフラグが何をするのか、どのように機能するのか (ほとんどの場合) を理解しています。先日読んだ良い説明 (ソースは見つかりませんが) はhasLayout、IE では基本的に「この要素を四角形にする」という意味です。

それは明らかにそれよりも複雑ですが、それでかなりうまく要約されています (私の意見では)。

私が理解できないのは、ブラウザがこのフラグを使用する理由です。答えを探していたところ、論理的に聞こえるものを見つけました。

Internet Explorer は、CSS が本格的に普及する前の非常に古いレガシ コードを処理する必要がありました。ブラウザに CSS を簡単に追加できるようにするためのアーキテクチャ上の決定として、hasLayoutフラグを使用して特定の CSS プロパティをトリガーし、ページが正しくレンダリングされるようにしました。これは IE4 の頃にさかのぼります。

これは、Firefox (当時は Netscape) が同じ問題に対処しなければならないことに気付くまで、私にはほとんど意味がありました。Netscape は Internet Explorer とほぼ同じくらい長い間存在していますがhasLayout、私の知る限り、内部フラグなどは必要ありません。

このhasLayoutフラグが Internet Explorer の非常に多くのバグの原因であることを考えると、なぜ IE にこのフラグがあり、他のブラウザはそれを必要としないのか知っている人はいますか?

これは純粋に好奇心から知りたいことです。もし誰かが理論を持っているか、たまたま答えを知っているなら. このフラグが役立つ理由 (またはそうでない理由) について詳しく知りたいです。

hasLayout を <i> 要素に適用して、イタリック体の文が同じ水平線上にある画像を覆い隠すIE7 のバグを回避する必要がありました。

zoomプロパティまたはプロパティのいずれかを使用してそうしましたdisplay: inline-block。

しかし今、イタリック体のフレーズは、イタリック体の部分が独自のブロックであるかのように動作します...ちょっと...または、IE7のみで、通常の文のように壊れたり折り返されたりしません。IE8 と FF は正常に動作します。

コード例:

次のようにレンダリングします。

代替テキスト http://img193.imageshack.us/img193/968/haslayoutitalics.png

<i>要素に通常の機能を戻すにはどうすればよいですか?

hasLayout = -1 の場合、true または false に設定されますか?

ありがとう..！

IE8 が hasLayout を修正/削除するはずだったという話がたくさんありました。通常は問題ではありませんが、発生していないようです。

問題は、IE7 の開発者ツールバーで行っていたように、IE8 の開発者ツールバーがhasLayoutが適用されていることを通知する方法がないように見えることです。

誰にも回避策がありますか？明らかな何かが欠けていますか？

多数の浮動要素を含む包含要素があります。その包含要素には、幅のパーセンテージ値も適用されます。

IE7 では、フロートを含む要素に続くコンテンツは、hasLayout を与える width 値のためにクリアされます (私はそう思います!)。

包含要素にレイアウトを持たせたくありませんが、明示的な幅が必要です。hasLayout=false を効果的に強制することで、IE7 でこの問題を回避する方法はありますか。

IE が (chrome や Firefox とは異なり) Web サイトを奇妙に表示していることに気付いたときはいつでも、zoom:1奇妙に表示されている部分の css クラスに a を入れてみます。多くの場合、これにより問題が修正され、他のブラウザとの一貫性が保たれます。

使用に問題はありますzoom:1か？CSS が検証されないことはわかっていますが、使用に頼りすぎると実際に問題が発生する可能性はありzoom:1ますか?

私のサイトはIE6+で完全に機能していますが、IE6またはIE5.5では、トラフィックの約6％がこのバージョンから発生しているため、IE6のユーザーを無視できないため、奇妙に見えます。代替品があるのを楽しみにしています。

いくつかの調査で、haslayoutプロパティを設定することでフォーマットの問題を解決できることがわかりましたが、CSSが非常に貧弱であると考えているため、この問題を修正するにはあなたの助けが必要です。

以下のURLを見つけることができ、IE6での動作を確認できます。テストできない場合は、ソースを表示して確認できます。提案を共有してください。

URL：http ://anujtripathi.net/BlogListing.aspx?Id=2

私<a>のページには 2 つの異なるコンテキストの要素があります。一部は div にあり (.container > a と呼びます)、一部は子 div にあり (.container > .section > a のように)、さらにはさらに子孫の div にあるものもあります (のように) .container > ... > .section > a)。<a>現在、次の CSS を使用してインライン要素の書式設定を行っています。

現在、リンクを でスタイリングしてborder-bottom: 1px dotted #333いるため、リンクはインライン要素のままにする必要があります。問題は、.section 内のリンクが .container 内のものとは異なる動作をすることがあるということです。後者は、FF 3.6 と IE7 の両方で問題なく表示されます。前者は、最初の文字かそこら (負のマージンの量の内側にあるものは何でも) IE7 で切り取られています (負のマージンで想定しています)。

hasLayoutのバグかもしれないと思ったので、3件の状況を確認してみました。それらは次のとおりです。

ケース 1) .container > a の場合、.container hasLayout は true です。( http://imgur.com/WJ3zM.png )
ケース 2) .container > .section > a の場合、.section hasLayout は false で、.container hasLayout は true です。( http://imgur.com/4NHxj.png )
ケース 3) .container > ... > .section > a の場合、.section hasLayout は false で、介在するコンテナー (div、li、および ul) の 1 つを除くすべてhasLayout が true で、.container hasLayout が true です。( http://imgur.com/WefBk.png )

最初の 2 つのケースは IE7 では問題ないように見えますが、3 番目のケースには負のマージンのバグがあります。このような限られた状況で、何がこれを引き起こしているのでしょうか?

多くの開発者が、私が 100% を使用する場所で 99.9% の HTML または CSS インライン スタイル幅を記述しているのを見てきました。99.9% を使用する正当な理由はありますか? 100% との効果的な違いはありますか?

編集して MSalters の非常に良い質問をリツイートしConsidering that 99.9% is one pixel off above 500 pixels, why not 99.99%? ます。彼の言う通りだと思いますdirty hack。

追加の参考資料:

• CSS ズーム プロパティに関する @Michael Stum のコメントにより、hasLayout のトリガーに関するこの興味深いリンクにたどり着きましzoomた。 Internet-Explorer.htm。
• @Andrew Dunn は、hasLayout に関するこの信じられないほど包括的なリンクを提供しました: http://www.satzansatz.de/cssd/onhavinglayout.html