1

我目前正在使用的网站存在问题。基本上，该网站不适用于所有浏览器。例如，我使用 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，并解决了他们向我展示的错误。有人可以知道我遗漏了什么或如何找到我的错误吗？我已经没有如何解决这些问题的想法了。

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 回答