IE互換性問題の処理
3208 ワード
IE、特に旧バージョンのIE 6とIE 7は、牛毛のような問題が多い.問題を減らすには、html 5のdoctypeのような標準的なdoctypeを選択します.
これらの標準的なdoctypeは、IEが自分のボックスモデルではなくW 3 Cのボックスモデルを使用するなど、IEを標準的なモードでページをレンダリングするようにし、互換性の問題は少なくなります.
しかし、まだ終わっていません.IEには他のBugsがあります.例えば以前にIE 6のオーバーフローバグに遭遇したことがある.すなわちposition:relativeのサブエレメントでは、親エレメントがoverflowをautoまたはhiddenに設定しても、サブエレメントがオーバーフローします.コードは次のとおりです.
この問題の解決策は、親要素にもposition:relativeを設定することです.
後で他の問題にも遭遇するので、まず参考資料を集めてここにいて、その時になってから更新します.
参考資料:[1]Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs(翻訳)[2]IEを倒した葵花の宝典：CSS Bug Table：幸せコレクション[3]IE CSS Bugs That’ll Get You Every Time | CSS-Tricks[4]IE互換性バグまとめ-江柳清happy-ブログ園[5]Internet Explorer CSS Bugs - hasLayout.net[6]The IE 'non-disappearing content' bug[7]Quirks Mode and Standards Mode - MDN[8]Activating Browser Modes with Doctype[9]IEボックスの模型の欠陥-ウィキペディア、自由な百科事典[A]Quirks mode - Wikipedia, the free encyclopedia[B]CSS - Quirks mode and strict mode[C]CSS2 - Box model tweaking[D]CSS Basic User Interface Module Level 3 (CSS3 UI) #box-sizing[E]box-sizing - CSS | MDN[F]Box Sizing | CSS-Tricks
<!DOCTYPE html>
これらの標準的なdoctypeは、IEが自分のボックスモデルではなくW 3 Cのボックスモデルを使用するなど、IEを標準的なモードでページをレンダリングするようにし、互換性の問題は少なくなります.
しかし、まだ終わっていません.IEには他のBugsがあります.例えば以前にIE 6のオーバーフローバグに遭遇したことがある.すなわちposition:relativeのサブエレメントでは、親エレメントがoverflowをautoまたはhiddenに設定しても、サブエレメントがオーバーフローします.コードは次のとおりです.
<div style="overflow:hidden;width:160px;height:100px;border:1px black solid;">
<div style="position:relative">
ie6 overflow bug ie6 overflow bug ie6 overflow bug ie6 overflow bug
ie6 overflow bug ie6 overflow bug ie6 overflow bug ie6 overflow bug
ie6 overflow bug ie6 overflow bug ie6 overflow bug ie6 overflow bug
ie6 overflow bug ie6 overflow bug ie6 overflow bug ie6 overflow bug
</div>
</div>
この問題の解決策は、親要素にもposition:relativeを設定することです.
後で他の問題にも遭遇するので、まず参考資料を集めてここにいて、その時になってから更新します.
参考資料:[1]Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs(翻訳)[2]IEを倒した葵花の宝典：CSS Bug Table：幸せコレクション[3]IE CSS Bugs That’ll Get You Every Time | CSS-Tricks[4]IE互換性バグまとめ-江柳清happy-ブログ園[5]Internet Explorer CSS Bugs - hasLayout.net[6]The IE 'non-disappearing content' bug[7]Quirks Mode and Standards Mode - MDN[8]Activating Browser Modes with Doctype[9]IEボックスの模型の欠陥-ウィキペディア、自由な百科事典[A]Quirks mode - Wikipedia, the free encyclopedia[B]CSS - Quirks mode and strict mode[C]CSS2 - Box model tweaking[D]CSS Basic User Interface Module Level 3 (CSS3 UI) #box-sizing[E]box-sizing - CSS | MDN[F]Box Sizing | CSS-Tricks