0

私のページレイアウトには2つの<div>タグがあります。1つはid#image-panelを使用し、もう1つは。を使用し#image-content-panelます。2<div>つのは、を使用して互いに積み重ねられposition: absoluteます。#image-content-panel（高いz-index）は上にあり#image-panelます。両方<div>にがありbackground: transparentます。

ページはChrome、Safari、Firefoxで正常にレンダリングされます。つまり、テキスト（見出しや段落など）から画像を見ることができます。しかし、IE（バージョン8）#image-content-panelでは、背景が白になります。

以下のスクリーンショットを見ることができます：

Crome、Safari、Mozillaでのレンダリング

IE8でのレンダリング

関連するCSSおよびHTMLコード：

HTMLコード

CSSコード

IEでも同じようにページをレンダリングしたいのですが。どんな助けでも大歓迎です。これを修正できない場合は、代替ソリューションも提案してください。

4

2 に答える 2

2

更新JqueryCyclePlugin は、古いバージョンのIEの要素に背景色を追加します。

サイクルの初期化でcleartypeNoBgオプションをに設定する必要があります。true

$("#image-content-panel").cycle({
    fx : 'scrollRight',
    speed : 2700,
    cleartypeNoBg: true 
});

編集以下は関係ありません

IE8はrgba値をサポートしておらず、単色にフォールバックします。フォールバックを定義しない場合、デフォルトで白になります。これは、表示されているものです。

これを処理する方法はいくつかあります。

1.IE8の制限を受け入れます。

    #header {
        z-index: 100 !important;
        width: 100%;
        height: 50px;
        background: rgb(0,0,0);
        background: rgba(0,0,0,0.6);
        margin: 10px 0 0 0;
    }

#headerrgbaをサポートしていないブラウザでは、背景が黒く塗りつぶされます。そうするブラウザでは半不透明です。

2.フィルターを使用する

    #header {
        z-index: 100 !important;
        width: 100%;
        height: 50px;
        background: rgba(0,0,0,0.6);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
        margin: 10px 0 0 0;
    }

#headerIE8と適切なブラウザでは、背景が60％透明になります。個人的には、フィルターの使用は嫌いです。それらはあなたのマークアップを恐ろしくし、あなたがあなたの頭の中でrgbを16進コードに変換することに長けていない限り維持するのは難しいです（私はそうではありません）。また、この特定のフィルターはIE8+です。IE6-7で機能する他のフィルターがありますが、IE7では機能しません。また、IE9がrgbaをサポートしているため、これをIE8固有のスタイルシートに分離するか、他の方法を使用してIE9がフィルターを使用しないようにする必要があります。

3. 1px x 1pxの黒、半透明の.pngを使用します

    #header {
        z-index: 100 !important;
        width: 100%;
        height: 50px;
        background: url(background.png) repeat;
        margin: 10px 0 0 0;
    }

これは、単純なために私が通常行くルートです。アルファを変更する必要があり、ブラウザの不整合を心配する必要がない場合は、.pngを作成するのに数秒かかります。

于 2012-09-05T08:00:49.433 に答える
1

他の人が言っているように、IE8はRGBAカラー値をサポートしていません。

ただし、これを回避するために使用できるハックがあります。サイトでCSS3Pieを試すことをお勧めします。背景のRG​​BA色など、多くの最新のCSS機能を古いバージョンのIEに実装します。

お役に立てば幸いです。

于 2012-09-05T08:04:57.523 に答える