CSS适用于某些浏览器，而不适用于其他浏览器(网站不适用于Firefox和chrome)

Question

我目前使用的网站有问题。基本上，这个网站不适用于所有浏览器。例如，我使用Firefox 13.0，但不使用FF7.0，使用Chrome 18.0，但不能使用旧版本。与IE 9.0的情况相同，但与IE 6.0不同。以下是网站：http://www.microboticsinc.com/Test/home.html.目前，它只在公司的3台机器上工作。因此，我现在只有两个主要问题。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，并解决了他们显示给我的错误。有人能知道我遗漏了什么吗？或者如何找到我的错误？我已经没有办法解决这些问题了。

Answer 1

我猜这里的问题在于这个位：

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

这是我发现的一张图表，描述了背景封面的浏览器兼容性。它朝着底部。

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

Answer 2

如果您需要背景图像来覆盖元素，请尝试以下操作：

.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/