この問題は説明するのが難しいです。Web サイトの背景用に次の CSS 部分があります。右上隅に画像が表示され、グラデーション色の背景が表示されます。
body{
color: #000;
font-family: Helvetica, Arial;
background: rgb(84,84,84);
background-color: #545454;
background-image: url(../img/bg.png);
background: url(../img/bg.png), -moz-linear-gradient(-45deg, rgba(84,84,84,1) 0%, rgba(117,117,117,1) 34%, rgba(191,191,191,1) 64%, rgba(178,178,178,1) 100%);
background: url(../img/bg.png), -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(84,84,84,1)), color-stop(34%,rgba(117,117,117,1)), color-stop(64%,rgba(191,191,191,1)), color-stop(100%,rgba(178,178,178,1)));
background: url(../img/bg.png), -webkit-linear-gradient(-45deg, rgba(84,84,84,1) 0%,rgba(117,117,117,1) 34%,rgba(191,191,191,1) 64%,rgba(178,178,178,1) 100%);
background: url(../img/bg.png), -o-linear-gradient(-45deg, rgba(84,84,84,1) 0%,rgba(117,117,117,1) 34%,rgba(191,191,191,1) 64%,rgba(178,178,178,1) 100%);
background: url(../img/bg.png), -ms-linear-gradient(-45deg, rgba(84,84,84,1) 0%,rgba(117,117,117,1) 34%,rgba(191,191,191,1) 64%,rgba(178,178,178,1) 100%);
background: url(../img/bg.png), linear-gradient(135deg, rgba(84,84,84,1) 0%,rgba(117,117,117,1) 34%,rgba(191,191,191,1) 64%,rgba(178,178,178,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#b2b2b2',GradientType=1 );
background-repeat:no-repeat;
}
http://www.colorzilla.com/gradient-editor/で作成されているため、これは正しいはずです。
したがって、各ブラウザでは背景全体が機能し、画像とグラデーションが表示され、Opera でも実際には機能しますが、背景は下部になく、フッターのみです。そこの背景は白で、Firebug/Dragonfly ではそれに集中できませんが、まだ本文と「#website」タグ内にあります。
<div id="footer">
<ul id="footermenu">
<li class="section"><a onclick="lightbox_open();"><img src="img/socialmedia/sitenotice.png" /></a></li>
<li class="section"><a href="#" target="_new"><img src="img/socialmedia/itunes.png" /></a></li>
<li class="section"><a href="#" target="_new"><img src="img/socialmedia/soundcloud.png" /></a></li>
<li class="section"><a href="#" target="_new"><img src="img/socialmedia/youtube.png" /></a></li>
<li class="section"><a href="#" target="_new"><img src="img/socialmedia/twitter.png" /></a></li>
<li class="section"><a href="#" target="_new"><img src="img/socialmedia/facebook.png" /></a></li>
</ul>
</div>
#footer{
width: 960px;
margin: -10px auto 0;
text-align: right;
}
#footermenu li{
float: right;
margin: 0px 5px 10px 5px;
}
次のスニペットが示すように、私は最終的に回避策を実行しようとしました.Opera に特に背景色を指定するなどです.これは、グラデーションのために最初は実際には正しくありません.
JS
if (window.opera){
document.getElementById('html').style.backgroundColor = '#b2b2b2';
document.getElementById('html').style.marginTop = '-10px';
}
CSS
html{
background-color:inherit;
margin-top:inherit;
}