ホームページ制作のアレ

ブラウザーチェックをばっちりやって納入したのに、IE8やIE9でレイアウトが思い切り崩れていると言われる。 見せてもらうと、まるでIE6やIE7で表示したような崩れ方。 この症状の場合、ほぼ100%そのIEの「互換機能」がONになっているのが原因と思われます。 互換機能という名前からして「いいもの」と思われがちですが、実のところは「IE8以上でもまともに動かなくなるような旧い旧いシステム（…どんなものか想像もつきませんが）を搭載したWEBサイトでも、IE8以上で見られるようにする」という機能で、端的にいうと「解釈をIE7程度に戻す」という機能です。 いわば、「旧式ブラウザー表示機能」と言えます。 …しかし先にも書きました通り、マイクロソフト自体がIE6/IE7を撲滅しておきながらこの機能、一体なんなんだと言わざるを得ません。 この機能を制作側で回避するには2つ方法があり、 1、Doctypeをがっちり書いておく…HTML5のDOCTYPEにしておけばIE9/IE10では最初から標準モードになるはずですが、ASPの利用などでそうもいかない場合もあり、そもそもIE8がこぼれてしまいますので 2、METAタグを書く < meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> と書く事で、モードを強制的にそのIEの「最新Verでレンダリング」に固定でき、互換機能ボタンを消せます。 —————- 余談ですが、この機能、IE8や9ではあまり心配する必要がありませんでした。 ちゃんとボタンとして独立しているため、意図的に押さない限りまず発動しませんし、自分で押した結果レンダリングが変わったというのが分かるので、もう一回押せば元に戻る、というのもすぐ分かるためです。 ところがIE10になって、ボタンのデザインが… こんなですよ。(※紙が破れたようなマークが互換ボタン） どう考えても「再読み込み」と間違えておします。 このレイアウト考えたデザイナー、なに考えてるんでしょう。 普通こんなん上げてきたらグーで殴られてもおかしくない酷さだと思います。 —————- IE10へのバージョンアップがはじまった今、今後はもう上記のをデフォで書いておく必要があると思いますが、問題は… このタグ、ヘッダのかなり上、おそらくはエンコードのすぐ下くらいの順位で書かないと場合によっては動作しない事があります。なので弊社が得意とするカラーミーSHOP-PROなんかでは使えない方法なんですよね。 ※カラーミーSHOP-PROのMETA追加はヘッダ内の「一番下」に追加される 実際やってみましたが、IE8/9では対処できたものの、IE10では互換ボタンがでたままという… 肝心なIE10が対処できないという結果でした。