RenzSpace Free Style Blog

IEはHTML5が未だにサポートされておらず…なので、あきらめて除外してしまうか。と思いきや、Javascriptで解決！

参考サイトはこちら。

HTML5から使用されるタグをIEにもタグと分からせるためのスクリプトですね。

とても助かります。

結構落とし穴があったので、忘れないようにメモメモ。

まずはヘッダにお決まりの切り替えソース。

<meta name="viewport" content="user-scalable=no, width=device-width" />
<link rel="stylesheet" href="iPhone用CSSパス" type="text/css" media="only screen and (max-width:480px)"/>
<link rel="stylesheet" href="PC用CSSパス" type="text/css" media="screen and (min-width:481px)" />

これだけで、PCサイトとiPhoneの切り替えはOK。

ただ、これをやるとIEにCSSが適応されないバグが発生。原因は不明。多分media=”"の部分だろう。

なので、以下を追記。

<!--[if IE]>
<link rel="stylesheet" href="PC用CSS" type="text/css" media="screen" />
<![endif]-->

これで、OKでした。

以上、メモ。

ブラウザ依存により表示がずれてしまった場合に、
IE用のCSSをわざわざ用意して、振り分けを行わずにちょこっと追加してあげるだけで問題解決。

例えば、margin:20px;をIEではmargin:15px;にしたい場合は 。

div.box{margin:20px; _margin:15px;} 
//↑marginの前に『 _ 』をつけるだけ。

これで、OK。

だいぶ楽です。

Webを作るにあたって、むか〜しから一番面倒くさいのはブラウザによる表示のズレ。

しかし、現段階では新しいブラウザだけだと、もうその心配もなくなって来た。

が、今でも結構多くの人がやってしまうコーディングの落とし穴をちょこっと紹介。

Divでレイアウトをする際に、やっては行けない事。

１：widthを設定したレイヤーにmarginやpaddingは使わない。
→これは、winとmacのmarginの数値の認識の違い（特に古いIE）から絶対にズレますので、 使わない事をお勧めします。そうしないと、winとmacの二つのcssを用意しなければならなくなります。

２：テキストエンコーディングを揃える。
→当たり前な事ですが、html,css,Javascript全て同じエンコードにしないとどこかで必ずズレます。

が、特に注意すべき点でしょうか。