2

私はページをまとめていますが、ブラウザ間の背景に本当に苦労しています。

このページは、いくつかのアルファブレンドされた背景、ボックスシャドウ、および境界線半径を使用し、ほぼ完全にインラインスタイルを使用して合成されます（基本的に、CSSクラスはほとんど/まったく使用されていません）。

IE9は私の主要なブラウザーであり、その中でページは見栄えがします。ただし、Chromeでは（Firefoxと言われていますが）、アルファブレンドされた背景のほとんどは、まったく表示されない（透明）か、単色で表示されます。HTML5の！DOCTYPE宣言で標準モードを使用しているので、IEの癖などを利用しているわけではありません。

明らかに、9より前のIEバージョンでは、背景（およびその他の問題があります）。しかし、私は古代のソフトウェアをサポートすることに関心がなく、それらのユーザーは彼らがふさわしいブラウジング体験を得ることができます。

何年もの間、「IEの透明性は最悪だ！」というのが一般的なリフレインでした。そのため、IE（通常は最悪のプラットフォーム）で適切に機能するようになれば、他のプラットフォームも同じように機能することを期待できましたが、ここでは私は反対方向に苦労しています！標準の「rgba（r、g、b、a）;」を使用しています。「background-Color」属性のディレクティブなので、根本的なDirectXフィルターやその他の魔法を使用していませんが、（Internet Explorer 9以降ではない）ブラウザーでは、アルファブレンドされていない結果が得られます（場合によっては機能します）。 、時々そうではありません）。

このサイトは次の場所でプレビューできます。https ：//net-xpert.com/-すべてのプルダウンメニューの背景は半透明であると想定されているため、ページの下部にあるホバリングリンクバーも同様です。また、[質問をする]ページに移動すると、そこにあるダイアログのすべての入力フィールドに色付きの背景が表示されているはずです...

ああ、最後に、私は任意のb / s、ブラウザー/プラットフォーム固有の「実験的」スタイルコードを実装することを完全に嫌います！CSS2 / 3のすべては問題ありませんが、私は単に「-browser-some-quirky-CSSAttribute」スタイルの使用を拒否します。（もっと多くの開発者がこれをやってくれることを願っています！-そうすれば、ブラウザメーカーはこれらの標準を採用するように強いプレッシャーにさらされ、私たちの生活はとても簡単になりますが、私は逸脱します...）

とにかく、標準に準拠したソリューションに関する洞察をいただければ幸いです（「ええ、Chrome et alは現在これを正しく実装していません...」という共同の承認であっても、少なくとも、それについて行われる...）

ありがとう！

4

1 に答える 1

1

まあ、これは非常に遅い答えですが、おそらくこれはまだあなたに役立つでしょう（あなたのサイトはまだ稼働しているようです）。

スタイルシートの1つを変更できると仮定して、私はあなたのために働くべき解決策を持っています。なぜこの問題に遭遇したのかについて..？正確な構成を再作成する方法がわからないため、推測することしかできません。

修正;

div[id^=mainMenuOverDiv] {
  background-color: rgba(128,128,128,0.9) !important;
}

私は不必要に使用するのが好きではありません!important、そしてあなたはより高い特異性を使用することによってそれを取り除くことができるかもしれません。私はこれをFirefoxでテストしましたが、動作しているようです。明らかに、実際のrgba（x、x、x、x）値を独自の値に置き換えたいと思うでしょう。

メニューにカーソルを合わせるたびにDIVIDをランダム化するJavaScript（私が想定している）を使用しているようですが、最初は一貫しています（つまり、あるとき#mainMenuOverDivjkhasdfsd89f9f9sdfl3l4l34lfdbvbcは、次のときは#mainMenuOverDivLSDklsdkmlzxncbzmxnc90234xcvassf）。'starts with' CSSセレクター（例で提供されている）を使用すると、この潜在的なスパナが機能しているにもかかわらず、メニューを分離できます。

インラインCSSは通常オーバーライドできないことを考えると、これが機能することは興味深い（そしておそらく洞察に満ちた）ことです。

これが発生する理由については、JavaScriptで生成されたコードの一部がIE以外のブラウザーに正しく移植されていない可能性があります。または、どこかで使用している場合、コードの縮小によって一部の機能が損なわれる可能性があります（ブラウザによって異なります）。1つのサイズが必ずしもすべてに適合するとは限らないため、すべてが正常に機能し続けるように、個々の設定に合わせて多くの縮小プラグインを調整する必要があります。 。たとえば、あるサイトではJavaScriptを除くすべてを縮小でき、別のサイトではJavaScriptは問題ありませんが、インラインCSSなどを縮小できない場合があります。GoogleAnalyticsコードがこれの犠牲になることがあります。

したがって、私の目には、問題はIE / Chrome / FirefoxまたはSafariに関係していない可能性があります-透明性はそれらすべてで正常に機能しています-コードが操作されているか、ブラウザに配信されている方法である可能性が高いと思います。

それが何らかの形で役立つことを願っています。外部スタイルシートを使用できない場合はお知らせください。代わりのスタイルシートを探します。

于 2014-03-13T17:15:03.427 に答える