如何在 Safari 浏览器中将背景颜色拉伸到视口的左侧和右侧

Question

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

这是我的 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 ( */
        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 的 class，具有以下属性。问题是我认为的100% auto。 class 需要删除或需要更改图像。图片是蓝色的大图片！

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;
    }

Answer 2

我是这样解决的：

HTML/PHP <head> 部分的标记修改：

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') == true && strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') == false) { ?><link href='/wp-content/themes/investorcom-2015/css/safari-styles.css?ver=1.0.0' media='all' rel='stylesheet' type='text/css' /><?php } ?>

CSS 样式：

div#maincontentcontainer div#home-services-block:after,
div#maincontentcontainer div#inner-page-content:after {
    margin-left: -100% !important;
    width: 200% !important;
}

感谢@RachelGallen 为我指明了正确的方向。

如何在 Safari 浏览器中将背景颜色拉伸到视口的左侧和右侧

How to make a background color stretch to left and right of viewport in Safari Browsers

html

css

safari

background-color