0

ユーザーのブラウザーが IE8 の場合に特に、いくつかのスタイル ルールを上書きしようとしています。私<!doctype html>にはこれらのルールがあります：

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<html>IE ブラウザーを検出した後、定義されたクラスをタグに追加します。

ターゲットにしたいブロックのクラスは.social. IE8 の .social を上書きするには、.css で使用する正しいセレクターは何ですか? 私は試しました、、.social.no-js.lt-ie9そしてno-js.lt-ie9ただ.no-js.lt-ie9。クラスをリストする順序は重要ですか? クラスがお互いの直接の子孫でない場合は問題になりますか? 私がしていることは、IE8 で実際の .social を上書きしているようには見えません。ヒントはありますか？

以下は私がこれまでに持っているものです...

.social {
    background: url('../images/thanks-paper.png') no-repeat 0 0;
    height: 540px;
    margin: 10px 0 40px -333px;
    padding: 0 0 0 310px;
    position:relative;
}

.no-js.lt-ie9.social {
  background:url('../images/thanks-paper.png') no-repeat 0 0;
  height:540px;
  margin:10px 0 40px -400px;
  padding-bottom:0;
  padding-left:382px;
  padding-right:0;
  left:8px;
  position:relative;
}

そして、これが現在のページの設定方法です...

<html class="no-js lt-ie9" lang="en">
  <head> ... </head> 
    <body> ... 
      <div class="social"> ... </div>
    </body>
</html>
4

1 に答える 1

1

これを使用して、IE8 以下をターゲットにします。

.lt-ie9 .social {
    margin-left: -400px;
    padding-left:382px;
    left:8px;
}

このクラスは、 Modernizr.no-jsなどのライブラリと組み合わせて使用​​することになっています。JavaScript を使用してクラスを削除することで、JS が有効かどうかの指標として機能します。CSS を使用して、javascript が無効になっているブラウザーをターゲットにすることができます。.no-js

また、クラス間のスペースにも注意してください。クラスがスペースなしで ( のように) 書かれている場合、実際にはそれらすべてのクラス.lt-ie9.socialを持つ要素を探していることになります。そのため、これらのクラスのすべてで要素を見つけようとしています。.no-js.lt-ie9.social

于 2013-09-30T19:58:17.607 に答える