2

私は次のhtmlコードを持っています：

<section class="first-content-top">
    <img src="images/img-diner.png" />
    <h1>Menu</h1>
</section>
<section class="first-content-middle">
         <article class="menu">
     </article>
</section>
<section class="first-content-bottom"></section>

次のタイプのcssを使用します。

.first-content-middle 
{
    background: url("images/bg-black.png") repeat;
    margin: 0 0 0 37px;
    padding: 0 20px;
    width: 595px;
}

しかし、IE8では、IE9やFirefoxで見られるように、まだ背景画像を見ることができません。

IE8の写真は次のとおりです。

これがIE8の写真です

そして、これがFirefoxの写真です。

そして、これがFirefoxの写真です。

私は次の解決策を試しました：

この問題を防ぐために、次のhtml5shivコードをページの先頭に追加しました。

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

そしてfirebugで、section要素にdisplay:block;プロパティが設定されていることを確認しました。

編集：heightセクションにcssプロパティを追加すると、バックグラウンドの問題が修正されます。ただし、セクションの高さは可変です。では、どうすればそれを修正できますか？

助言がありますか？

4

5 に答える 5

8

pngの背景画像は少なくとも4x4pxである必要があります。

于 2012-08-30T13:27:11.433 に答える
1

.first-content-middle {background：url（ "images / bg-black.png"）repeat scroll 0 0; マージン：0 0 0 37px; パディング：0 20px; 幅：595px; }

背景から透明を削除します

于 2012-08-30T13:16:04.603 に答える
0

これはあなたの問題に関連している可能性があります。一般的に、IE9以下は、透明度、不透明度が好きではありません。

PNGの透明度と不透明度を使用している間、ie7とie8の余剰は透明である代わりに

于 2012-08-30T13:12:07.567 に答える
0

IE7とIE8は、アルファ透明度のネイティブPNGサポートを備えていますが、不透明度が画像に現れるとすぐにバラバラになります。不透明度の値を100％に設定すると（つまり、フィルター：alpha（opacity = 100））、IEはPNGのアルファ透明度を純粋な黒で塗りつぶします。これは、「ブラックハロー」と呼ばれることもあります。アルファフィルターはいつでも削除して塗りつぶしを削除し、アルファ透明度を復元できますが、両方をサポートするには、IEの独自のフィルターをさらに使用する必要があります。以下の例はすべて、IEターゲットに配置する必要があります

/* Normal CSS background using an PNG with an alpha transparency */
#demo {
background:url(ie8-logo.png) 0 0 no-repeat;
}
于 2012-08-30T13:14:01.940 に答える
0

CSSでdisplay：blockにセクションを設定する必要があります

IEでは、shivを使用する場合でも、HTML5要素をブロック要素として宣言する必要があります。私はこの行をInternetExplorerに使用していますが、必要な要素に合わせて変更できます。

header,nav,article,footer,section,aside,figure,figcaption{display:block}

Modernizrドキュメントから：「これらの要素の多くをdisplay：block;に設定することもできます。」

IEからHTML5タグのスタイルを設定しない（shivを使用）

于 2012-09-01T23:45:05.183 に答える