続::IEではコメントにstyleが効いちゃうハナシの対策案
ええと、前回軽すぎたので今回はちょっとだけ。
<head>
<style>
body *{
display :block;
border : solid;
padding : 10px;
margin : 10px;
}
</style>
</head>
<body>
<h1>H1</h1>
<!-- [if !IE]> <!--> <!-- Comment --> <!--<![endif]-->
<p>P1</p>
<p>P2</p>
</body>
<head>
<style>
body *{
display :block;
border : solid;
padding : 10px;
margin : 10px;
}
</style>
</head>
<body>
<h1>H1</h1>
<!-- Comment -->
<p>P1</p>
<p>P2</p>
</body>IEにおいては、前者と後者とでは、レイアウトが異なります。前者のようなコンディショナルコメントならばＯＫみたいですけれど、バッドノウハウでしょう、というお話しだっだんですね。
ちなみに、FirefoxでXHTML内で使ってもパースエラーにはなりません。
だからといって良い書き方であるとは限らないと思うのです。バッドノウハウ？特にIEでは。キモイ記述がありますから。IEの場合、<!-->のあたりは本当に微妙。それと、<![endif] のあたりも、これでええのんか？と思うのです。でもまぁ、ことIEに限っていえば、そのあたりの記述は、パースエンジンには渡っていないようではあります。たぶん。それが証拠に、IEにおいて前者と後者でもって、bodyあたりのinnerHTMLを調べて比較してみると、前者ではコメントがなくなっており、後者ではコメントが存在しているわけです。で、存在しているコメントがレイアウトの崩れを誘発しているというわけなんですよね。Firefoxでは、どうなのかしらとちょっとだけ考えてみたのですが、DOMinspectorでみてみると無事に複数のコメントに分割されているようではあります。<!-->のあたりとかも分割されているっぽいのでいいのかな？識者によるご評価をお願いできれば幸いです。
ええと反省ばかりでアレなので、効果はどうかというと。下記のような場合にレイアウトの崩れが防止できるかもしれません。
IE7において、セレクタ周辺でHTMLコメントの参与のせいでレイアウトがおかしくなるとき。隣接セレクタやfirst-childな擬似クラスとか、IE7で登場した新機能あたりで困ったチャンになっているかもなのです。コメントがセレクタの対象の勘定にはいっちゃう。
IE6を含むIE一般において、floatしたblockコンテンツの内容にHTMLコメントが存在しているせいで特殊な状況下ではレイアウトが崩れてしまう。
そのほか、今日の日記であげたような事例など。
2/22追記 上であげた2番目の例、つまりfloatの時なのですけれど、CSS2やCSS2.1の仕様によれば、floatした要素では、{display:block}が記述されなくても暗黙のうちにそのように解釈されるとのことです。そうなれば、3番目の例の特殊な場合であるということができるようですね。{display:block}されたHTMLコメントがレイアウトを壊すと言う意味で同じことになっていますから。
いずれの場合でもHTMLコメントを消せば問題ないのですけれどもね。コメントを残したい場合に、IEの条件付コメントを上手に使えればヨシとできるかもしれませんし。
※本記事中にtypoとかがあったらすみません。適宜読み替えて下しませ。記憶だけで書いているものでして。
