1

このHTMLコード...

<a href="LINK" class="testclass"></a>

...このCCSコードで動作します...

  a.testclass
  {
    background: transparent url(sprite.png) no-repeat -125px -671px;  
    display: block;
    width: 378px;
    height: 150px;
  }

... Firefox 12ではありますが、InternetExplorer8ではありません。

コードは、アンカー、スプライト、CSSに関するこの質問に触発されています。同様の質問を見つけましたが、このコードはかなり複雑なDrupalインストール内に配置されているため、コードを調べて「絶対に配置された外部divといくつかのメニュースタイル」を見つけるよりも、この問題を修正する簡単な方法があることを願っています。 "、2で問題の原因となっていました。

ご協力いただきありがとうございます。

編集-1：

これはFirebugHTMLログです。

<div id="banner-area">
  <div id="banner-left">
    <div class="region region-banner-left">
      <div>
        <a href="LINK">
          <img width="378" height="150" alt="ALTTEXT" src="IMAGE.GIF">
        </a>
      </div>
    </div>
  </div>
  <div id="banner-right">
    <div class="region region-banner-right">
      <p>
        <a class="testclass" href="LINK"></a>
      </p>
    </div>
  </div>
</div>

参照されるCSSコードは次のとおりです。

#banner-area {
    width:756px;
    margin:0;
    padding:0;
    overflow:hidden;
}

#banner-left {
    width:378px;
    float:left;
    margin:0;
    padding:0;
}

#banner-right {
    width:378px;
    float:right;
    margin:0;
    padding:0;  
}

最初の画像（IMAGE.GIF）はFFとIE8で表示されます。2番目のフーバー（スプライトに置き換えたいもの）はFFでのみ表示され、IE8では表示されません。

Florianが提案したように、透明度のオンとオフを切り替えましたが、効果はありません。画像サイズを幅と高さで10px縮小しましたが、それも役に立ちませんでした。

4

2 に答える 2

1

2 日間無駄な時間を過ごした後、IE8 は 31 個を超える css ファイルをインポートしないことがわかりました: http://drupal.org/node/228818?page=1

インストールの Drupal 管理パネルで「css ファイルの最適化」機能を再度有効にした後、開発の妨げにならないようにオフにしていましたが、すべて正常に機能しました。

于 2012-06-07T16:29:15.377 に答える
0

この質問は関連しています: IE CSS Bug: background-color: transparent は background-color: (any other color) とは異なる動作をします

コードを次のように変更します。

a.testclass
{
  background: url(sprite.png) no-repeat -125px -671px;
  display: block;
  width: 378px;
  height: 150px;
}

その背景色を本当に消去する必要がある場合（したがって、透明に設定する必要がある場合）、次のような他の設定を試してください

a.testclass
{
  background-color: transparent;
}

ただし、IE8 はそれを好まないため、IE8 用にいくつかの修正が含まれていることに注意してください。

于 2012-06-04T15:47:10.127 に答える