IEにだけ適用するCSSの定義を教えてください。

質問

IEだけ微妙にmarginなどの設定がずれてしまいます。

調べて色々試して見るのですが、なかなか反映してくれないです。

h1 #hoge

と言う見出しを仮定して、

h1 #hoge {
margin-top: -10px;
}

という定義があった場合、IEだけに-10pxを-50pxとするにはどうしたらよいでしょうか？

ちなみに確認しているのはIE9です。

宜しくお願いいたします。

回答No.2

DrFell · ベストアンサー

h1 #hoge {
margin-top: -10px;
margin-top: -50px/9;/*Ie8以下？*/
*margin-top: -50px;/*Ie7以下？*/
_margin-top: -50px;/*Ie6以下？*/
}
h1 #hoge:not(:target) {/*Ie9用*/
margin-top: -50px/9;
}

「ターゲットブラウザやバージョン　ハック」で検索すると幸せになれますよ。正しくはないのですが、エラーを以ってエラーを制する感じです。正しくはないのでどうしてもの場合に悪いことを知りながらしかたなく使ってください。

Ieのバグの解決策も「IE バグ　解決」などで検索すると出てきますので、そちらを試して、ダメだった場合などできるだけハックは使わない方向で制作してみてください。

お礼

有難う御座います。
ご連絡頂いたキーワードでも調べて見たいと思います。

また、複数の定義方法を教えてくださり有難う御座いました。
早速チャレンジして見ます！

回答No.1

ORUKA1951

h1 #hoge
という書き方は、h1の子孫の一意セレクタと言う意味になります。正確には
h1 *.hoge
と判断します。しかし、そのような書き方はしません。
たとえば、HTMLが
<h1 id="hoge">見出し</h1>
なら、
h1#hoge /*詳細度[0,1,0,1] */
ないし、
#hoge /* 詳細度[0,1,0,0] */
　です。上を使うのは、他のページで#hogeが使われているとき(たとえば<div id="hoge">に、区別するためです。

h1 #hoge
と書かれていることは、HTMLが
<h1>なんたらかんたら<span id="hoge">のページ</span></h1>
なのでしょうね。その場合、そもそもidは不要で
h1 span{}
で良いです。スタイルシートのために、IDやclass名をつけないようにしましょう。この例のように、特定する方法はいくらでもあります。

　ちなみに、
★IEだけに-10pxを-50pxと
　ということは、ありえません。古いIEや互換モードで起動しているときであっても、その誤差はコンテナブロックの内辺を参照するか、外枠を参照するかの違いですから、他の部分で間違っているのだと思います。

お礼

有難う御座います。

他の部分も間違っているところがありそうなので、再度確認して見たいと思います。