The Trap of Web Design

クイズになる予定でしたが、自分が納得する回答が得られず、成立しません（笑）問題の出し方を考えると無理矢理なんとかなりますが、そうなると簡単すぎるのですよ。簡単だと思う方はアタマん中で思い浮かべていただければ良し。分からん、って方は実際にやってみれば良し。

さて、スタイルシートでのフロートの使いこなしは難しいもんですが、以前から何度もやってて困ってて、そういや IE7 は直ってるのかな？と思って調べたら、やっぱり IE6 と同じで「仕様通りじゃない」という挙動に関するお話。

この、フロートブロックふたつ続きで、その後にフロート無しのブロックがある状況。最後のフロート無しブロックの #sidebar をページの一番上からの配置にするには、どうする？ってことなんですが、Safari、Firefox、Opera ではどうするも何もそうなってるわけなので、IE（7・6-）でも同じくしたいんです。

作った XHTML は例によって DOCTYPE 宣言つきで、IE7 は仕様通り、IE6 は互換モード動作になるわけですけど、仕様通りの筈の IE7 でも他のブラウザと違うわけです。問題の答えとしては、HTML 側でブロックふたつをグループ化すれば良い、ということになります。でも、自分としては、それは「IE のために XHTML 側に記述追加しなくちゃならん」ということなので納得がいかん訳です。IE6 を互換モードにしてるのは「あえて」なので、その対策に関しては必要に応じてやるようにしてるんで仕方無いと考えますが、IE7 が他と異なる点は、許せん（笑）

伝えたいのは、最近、ウインドウズ IE の（独自）仕様については、haslayout に関して知る事から対処できる、というような情報が出回って、確かに今まで対処で「ナンデダヨ」って思ってた制作者にとっては、それはそれで「ソウイウコトカ」という話にはなる訳ですが、だからといって決して「それさえ理解すれば問題回避が可能」ということでは無い、ってことです。IE6 はすでに諦めてますが、IE7 が仕様準拠をうたっていても、全く信用できない、ていうこと。

えー、あと、クイズになるかどうか分かんないですが、今回の IE バグ例示のソースは、ボックスのそれぞれの幅指定必要な箇所をパーセントにしてリキッドレイアウトにしてますが、同様に #sidebar をピクセル指定で幅固定したもの、っていわれたらどうすれば良いか、お時間がありましたら挑戦してみてください。あ、モトの XHTML 自体が各種ブラウザの表示互換をしていないものでしたから「#top と #main をグループ化」したものでお試しください。

そうなると、今度はおそらくネガティブマージンに関してのオハナシになるんだな。