html - 如何在 Safari 浏览器中将背景颜色拉伸(stretch)到视口(viewport)的左侧和右侧

Question

我在 http://bit.ly/1gH5Nqw 有一个网站在页面中间的内容 block 后面有一个白色背景。在除 Safari 之外的所有浏览器中，白色背景延伸到视口(viewport)的左右边缘。有谁知道为什么或如何解决这个问题？

这是我的 CSS:

div#maincontentcontainer div#home-services-block,
div#maincontentcontainer div#inner-page-content {
    background-color: #fff; /* trying to get background to appear in Safari browser */
    margin-top: 60px;
    position: relative; /* to get the container to extend to the screen/viewport margins */
    }
    div#maincontentcontainer div#home-services-block:after,
    div#maincontentcontainer div#inner-page-content:after { /* to get the container to extend to the screen/viewport margins (http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen) */
        content: "";
        position: absolute;
        height: 100%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        background-color: #fff; /* changed `background:` to `background-color:` to see if white background would appear in Safari browser -- it did not */
        z-index: -1;
    }

适用于除 Safari 以外的所有现代浏览器:

在 Safari 中不起作用:

Answer 1

这就是问题所在。 maincontentcontainer 有一个名为 home background 的类，具有以下属性。我认为问题是 100% auto。需要删除该类或需要更改图像。图像是一个蓝色的大图像!

div#maincontentcontainer.home-background {
         background: url('/wp-content/themes/investorcom-2015/images/home-background.png') no-repeat center top;
         background-image: url(http://investor-com.com/wp-content/themes/investorcom-2015/images/home-background.png);
         background-size: 100% auto;
    }