1

現在取り組んでいる Web サイトに問題があります。基本的に、この Web サイトはすべてのブラウザで動作するわけではありません。たとえば、Firefox 13.0 では動作しますが、FF7.0 では動作せず、Chrome 18.0 では動作しますが、古いバージョンでは動作しません。 IE 9.0 でも同じシナリオですが、IE 6.0 ではそうではありません。Web サイトは http://www.microboticsinc.com/Test/home.html です。現時点では、社内の 3 台のマシンのみで動作しています。再開するには、現時点で 2 つの主な問題しかありません。1-サイズ変更: ズームイン/ズームアウトすると、基本的に背景画像があちこちに配置されます。CSS コードに仕様を追加する必要があるかもしれません。2-すべてのブラウザと互換性があるわけではないという事実。

ここに私の背景 mcb.css があります:

.outerDiv {    
    border:solid 3px transparent;
    width:1070px;
    height:1000px;
    position:relative;
    color:black;
    font-family:verdana;
    font-weight:bold;
    font-size:11px;
    text-align:left;
    margin: 0 auto; 
}

.nestedDivTL {
    background-color:transparent;
    width: 175px;
    position: absolute;
    top: 165px;
    left: 10px;
    bottom: 596px;
}

.nestedDivTR {
     background-color:transparent;
     position:absolute;
     top:50px;
     right:400px;
}

.nestedDivBL {
     background-color:transparent;
     width:400px;
     height:300px; 
     position:absolute;
     top:200px;
     right:25px;
}

.nestedDivBR {
     background-color:transparent;
     width:400px;
     position:absolute;
     top:200px;
     right:450px;
}

.nestedDivBG {
    background-color:transparent;
    width:Auto;
    height:Auto;
    position:absolute;
    top:0px;
    left:0px;
}

.nestedDivSC {
    background-color: transparent;
    position: absolute;
    top: 176px;
    left: 202px;
}

.nestedDivnf {
    background-color:transparent;       
    position:absolute;
    top:420px;
    left:15px;
    width: 160px;
    height:568px;
    bottom: 12px;
    overflow:hidden;
}

a:hover{text-decoration: underline; color:green} 

* { margin: 0; padding: 0; }

.transparent {
    /* Required for IE 5, 6, 7 */        
    width: 100%; 
    /* Theoretically for IE 8 & 9 (more valid) */
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);
    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;
    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;
    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;
}    


body {
    background-image: url("Resources/Web Page Parts/Misc/Map.gif"); 
    background-repeat:no-repeat center center-fixed;
}

html { 
    background:transparent url("Resources/Web Page Parts/Back Drops/carb.jpg") no-repeat center center fixed; 
    display: block;                       
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

w3c.org の検証ツールで CSS をテストし、表示されたエラーを解決しました。何を省略したか、またはエラーを見つける方法を教えてください。これらの問題を修正する方法が不足しています。

4

2 に答える 2

1

ここでの問題は、このビットにあると推測しています。

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

背景カバーのブラウザー互換性を説明するグラフを見つけました。下向きです。

http://www.quirksmode.org/css/background.html

于 2012-07-16T19:51:14.773 に答える
0

要素をカバーする背景画像が必要な場合は、これを試してください。

.bg {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 5000;
}

このリンクには、サイズ変更可能な完全な背景画像のコード サンプルとデモがあります。これは、div や段落など、どこにでも配置できます。

コード：

#img.source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

リンク：

http://css-tricks.com/how-to-resizeable-background-image/

于 2012-07-16T20:56:14.180 に答える