2

私は数時間を費やしてきましたが、これを理解できないようです。私はこれに似たhtmlツリーを持っています:

<div class="region">
  <div class="area" id="one">
    <img src="..." />
    <span>...</span>
...

次に、私のcssは次のとおりです。

.region {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 80%;
}

.area {
  display: inline-block;
  text-align: center;
  width: 25%;
}​

.area img {
  border: 1px solid green;
  margin: 0;
}

問題は、何らかの理由で、領域クラス内で img をオーバーライドできないように見えることです。firebug を調べると、適用されているグローバル img (表示: inline-block) だけが表示され、他には何も表示されません。

興味深いのは、CSS の「span」を「img」に置き換えると上書きされることです。これはどのように起こりますか？タイプミスなどをテストしましたが、これを理解できないようです。

どんなヒントでも大歓迎です！

4

3 に答える 3

1

Firefox 16.02、最新の Safari および Chrome でも同じ問題が発生します。ただし、イメージにクラスを追加すると修正されます。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    .region {
      margin-left: auto;
      margin-right: auto;
      padding: 0;
      width: 80%;
    }
    .area {
      display: inline-block;
      text-align: center;
      width: 25%;
    }​
    .area img {
      border: 1px solid green;
      margin: 0;
    }    
    .area .place {
        border: 1px solid purple;
    }
    </style>
    <title>Hello Dolly!</title>
</head>
<body>
    <div class="region">
        <div class="area" id="one">
            <img src="../Pictures/TheBridge.jpg" class="place">
            <span>Span This</span>
        </div>
    </div>
</body>
</html>
于 2012-11-19T23:53:40.680 に答える
0

問題を再現できるかどうかを確認するために、実際のブラウザでhttp://jsfiddle.net/UxLuJ/1/を試してみてください。

私の場合、Chrome バージョン 23.0.1271.64 と Firefox 16.0.2 を使用すると、img タグが正しく解析されません。この問題を解決するには、次のようにします。次のように、.country と .country img の間にダミーのセレクターを追加します。

.country .foo {}

これで、img タグが正しく認識されます。

これは、Carl によって報告されたバグと同じようですが、私は少し異なる回避策を使用しています。

他の誰かがこれを確認していただければ幸いです。

于 2012-11-20T00:42:01.600 に答える
0

なぜこれが起こっているのかわかりませんが、それを引き起こしている問題を見つけました。私の元のCSSセレクターは次のようになります。

.area {
  display: inline-block;
  text-align: center;
  width: 25%;
}​

.area img {
  border: 1px solid green;
  margin: 0;
}

.area span {
  vertical-align: middle !important;
}

この順序では、コードは機能せず、img は完全に無視されますが、span はそうではありません。

ここで、.area、.area span、.area img の順序を残して img を span と交換すると、span は無視されますが、img は無視されません!

何が原因なのか誰にもわかりませんか？この種の問題に遭遇したことはありません。

于 2012-11-19T23:54:43.940 に答える