1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
---
title: ページの背景色が抜けている
slug: Web/Compatibility_FAQ/No_Background_Shown.html
tags:
- Compatibility
- Decoration
---
<h2 id="概要">概要</h2>
<p> 他ブラウザにて表示される背景色が、mobile版Firefoxにて表示されません。<br>
領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示されたりします。</p>
<div>
<div style="margin-left: 50px;">表示画面</div>
<p><img alt="" src="https://mdn.mozillademos.org/files/9981/0201.jpg" style="width: 493px; height: 250px; margin-right: 50px; margin-left: 50px;"></p>
</div>
<h2 id="要因">要因</h2>
<p> 要因の代表例として以下があります。</p>
<ol>
<li>
<p><strong>ベンダープレフィックス</strong><br>
必要なベンダープレフィックス付きプロパティが記述されていない場合があります。</p>
<pre><code><font size="3"> .bg_hoge {
background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
} </font></code></pre>
<p>上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。<br>
また、<a href="https://developer.mozilla.org/ja/docs/Web/CSS/gradient">gradient</a>値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいます。</p>
</li>
</ol>
<h2 id="解決策">解決策</h2>
<p> 要因の解決策の代表例として以下があります。</p>
<ol>
<li>
<p><strong>ベンダープレフィックス</strong><br>
CSS3準拠の backgound: <a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient</a>(); を追記します。</p>
<pre><code><font size="3"> .bg_hoge {
background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
<font>background</font>: <strong>linear-gradient(to bottom, #ff4466 90%, #ffffff);</strong>
} </font></code></pre>
<p>注意：<a href="https://developer.mozilla.org/ja/docs/Web/CSS/gradient">gradient</a>値や<a href="https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient">linear-gradient()</a>関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。</p>
</li>
</ol>
<h2 id="メリット">メリット</h2>
<p> ・他のブラウザでも互換性を維持することができます。<br>
・追記のみの対応のため改修が容易です。</p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ">戻る</a></p>
|
