背景には、常に私は、私は非常に把握することはできません可能CSS /ブラウザのバグに遭遇してきた体

には適用されません。簡単に言えば、私は次のシナリオを設定している：あなたが見ることができるように背景には、常に私は、私は非常に把握することはできません可能CSS /ブラウザのバグに遭遇してきた体

.my-class { 
 
    background: #66c28f; /* Old browsers */ 
 
    background: -moz-linear-gradient(left, #66c28f 0%, #0e9498 100%); /* FF3.6-15 */ 
 
    background: -webkit-linear-gradient(left, #66c28f 0%,#0e9498 100%); /* Chrome10-25,Safari5.1-6 */ 
 
    background: linear-gradient(to right, #66c28f 0%,#0e9498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66c28f', endColorstr='#0e9498',GradientType=1); /* IE6-9 */ 
 
}

<body class="my-class"> 
 
</body>

は、複数の背景特性は、後方互換性のために追加があります。問題は、複数のバックグラウンドが定義されていると、何も表示されないことがあります。 3回に1回、ページをロードするうちに1回、バックグラウンドは表示されません。それはすべてか何もないようです。しかし、私は、ページのサイズを変更、または第二のボディを選択して、開発者向けツールでオンとオフ背景色を切り替える、色がすぐに表示され（はい、スタイルは下のスクリーンショットを参照してくださいツール - 開発者に適切に動作して見せます）。私はテストでChromeの最新バージョンを使用しています。

私はそれは体がそのように100％の高さや何かを持っていないとの問題ではありませんかなり確信しています。スタイルシートは、ヘッドセクション内の最後のスタイルシートでもあります。 1つのバックグラウンドプロパティを除くすべてを削除すると、100％の時間で動作します。

これは現代のブラウザで起こる理由を任意のアイデア？フォールバックの背景スタイルを指定することはできませんか？

以下のスクリーンショットは、背景がではなく、が表示されている（ただし開発ツールでは適切に動作しているように見える）場合の開発者ツールの結果を示しています。

注：これは、この2009年のポストと同様の問題のようですが、何の説明が与えられなかった。background color doesn't always show up

出典

2016-09-20 Swquenzer

私のブラウザは – kukkuz

私はこれで問題があった後は、しかし、あなたの<body>にheight:100%を与えることを試みますそして<html>たり、時にはあなたの<body>にmin-height:100%を試してみてください。この場合、には、以下のCSSコードを再試行してください：

html, .my-class { 
    height: 100%; 
    background: #66c28f; /* Old browsers */ 
    background: -moz-linear-gradient(left, #66c28f 0%, #0e9498 100%); /* FF3.6-15 */ 
    background: -webkit-linear-gradient(left, #66c28f 0%,#0e9498 100%); /* Chrome10-25,Safari5.1-6 */ 
    background: linear-gradient(to right, #66c28f 0%,#0e9498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66c28f', endColorstr='#0e9498',GradientType=1); /* IE6-9 */ 
}

この問題についての詳細を知るために、このquestionをチェックしてください。

出典

2016-09-21 01:07:06 MuhammadJ

非常に興味深い...私はこの問題を持っていないようだ最新のクロームです - HTMLとしてだけでなく、bodyタグ（すなわち.MYクラス）はトリックをしたために、同じスタイルを追加します。あなたのリンクからは、いくつかのブラウザに問題があるように見えますが、その動作は決して完全に一貫していません。いずれにせよ、ソリューションに感謝します。 – Swquenzer

@Swquenzerそうですね、ブラウザ間の問題やさまざまな振る舞いです。 – MuhammadJ

背景には、常に私は、私は非常に把握することはできません可能CSS /ブラウザのバグに遭遇してきた体

答えて

関連する問題