2011.08.16
css

IEでだけレイアウトがうまくいかないとき

学校でウェブを勉強していた頃、先生に言われたことはFireFoxを元にレイアウトを作ると良いということ。

FireFoxでOKなら他のブラウザではだいたいは大丈夫だということでした。

しかし、IEだけは相当厄介で、バージョンによっても違う見え方になってしまいます。

またIEか・・・といつも思う。

なんとか両方でOKなように調整するのがベストですが、どうしてもダメなというときはハックを使います。

しかし、ハックはできるだけ使わないほうが良いということが前提です。

例えば

.test {margin:10px}

に対してIEのハックを使うとしたら下記を付け加えます。

.test {margin:10px}
*html .test {margin:10px;} /*IE6のときだけ*/
*:first-child+html .test {margin:9px;} /*IE7のときだけ*/
head~/* */body .test {margin:8px;} /*IE8のとき*/
html:not(:target) .test {margin:10px;}/*IE8以外のモダンブラウザ*/

head~/* */bodyを使うとIE8に適用されるのは良いのですが、FireFoxなどの他のブラウザにも適用されてしまいます。
この場合、html:not(:target)で指定することで、IE8以外のブラウザの値を指定しています。
IE8だけに適用されるハックはないみたいですね…。

現在はIE6のシャアは高くないのであまり気にしなくても良いかと思います。
私も最近はウェブサイトを作るときIE6は無視しています。
関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP