そろそろIE7のことは考えずにWEBサイト制作できるのだろうと思っていた矢先、ビジターがIE7でうまく見えないらしいという指摘。
久しく遭遇していなかった不具合にいろいろ忘れかけていたこともあったので備忘録。
レスポンシブWEBデザインだったのでデバイスに合わせてブラウズするのですが、PCで開くとすぐにスマーフォンサイズに縮小しまうとのこと。
確かにIE7で起こることを確認しました。
これは、IEの古いブラウザで、IE8並のレンダリングに近づけることができるというJavascriptライブラリIE8.jsが原因でした。
これを使っていたことが反って仇となってしまうとは… で、削除したらPCサイズで表示されるようになりました。
が、今度はこのIE7で、あちこちにレイアウトの微妙なズレなどが発覚。
IE7でチェックしていなかったので当然といえば当然なのですが…
過去にもよく遭遇した事象だったのですが、思い出すのに一苦労。 なのでメモメモ。
まず、IE7のみのCSSハック
*:first-child+html #something {}
でマージンとか修正。
liなどのリストをfloat:left; で横並びにすると段々に高さがズレる。
float:left; は li に指定して、li a には 幅や高さフォント関連を指定。
z-indexを指定しても要素の重なりを制御出来ない。
IE7では同一階層以外は、後にある要素が自動的に上に重なるのでz-indexは意味がない。
そこで、上に置きたかった要素に position:relative を指定してやったら 修正できました。
IE7との決別 はもう少し先になりそうです…