Question

我正在处理我目前正在处理的网站的问题。基本上这个网站不能与所有浏览器一起使用。我的工作例如使用Firefox 13.0但不适用于FF7.0并且适用于Chrome 18.0但不适用于旧版本。使用IE 9.0但不在IE 6.0上的场景。这是网站：http：//www.microboticsinc.com/Test/home.html。目前它只在公司的3台机器上工作。所以要恢复我目前只有两个主要问题。 1-Resizing：当我放大/缩小时。它基本上将背景图像放在一起。可能我需要在我的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/

CSS适用于某些浏览器而非其他浏览器（网站不支持Firefox和Chrome）

2 个答案: