• Home
  • About 概要
  • Service できること
  • Drone 空撮
  • Blog ブログ
  • Privacy Policy
お問い合わせ
CONTACT INFORMATION
三重県松阪市
嬉野津屋城町1355−4
0598-30-5698
月~金曜日 9:00~18:00
Tweets by aquacube
  • Home
  • About
  • Service
  • ドローン・空撮
  • ブログ
  • Privacy Policy
お問い合わせ
To Blog

久々のIE7 CSS ハック。 レスポンシブWEBデザインでの不具合

2012.06.23
-
All

そろそろ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との決別 はもう少し先になりそうです…

PREVIOUS POST
CSS3 スライドエフェクトメニュー
NEXT POST
“恐ろしすぎる『ゴキブリ』の潜在能力”のまとめがオモシロかったので
category
  • All
  • News
  • Tips
  • WordPress
archives




LATEST POSTS
  • 2022.08.01
    2022年度夏期休業のお知らせ
  • 2021.12.24
    年末年始の休業のお知らせ
  • 2021.07.21
    7月22日(木)~7月26日(日)休業のお知らせ
GET CONNECTED

Copyright - AQUACUBE

久々のIE7 CSS ハック。 レスポンシブWEBデザインでの不具合 | ホームページ制作  三重- AQUACUBE(アクアキューブ)