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

【问题标题】：How to make a background color stretch to left and right of viewport in Safari Browsers如何在 Safari 浏览器中将背景颜色拉伸到视口的左侧和右侧
【发布时间】：2015-11-10 14:43:18
【问题描述】：

我有一个位于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 (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 中无法使用：

【问题讨论】：

你能发布截图显示 Safari 和任何其他浏览器之间的区别吗？
感谢@oxguy3 的帮助
what vsn of safari? Safari 5.1.7 (7534.57.2)
我不确定如何在我的 PC 上测试它在 Mac 上的真实外观。有一些网站会复制浏览器和移动设备以进行测试，但我找不到显示 Mac Safari 浏览器外观的网站。
Safari 5...真的很老了，我不确定它是否支持无前缀 transform

标签： html css safari background-color

【解决方案1】：

我是这样解决的：

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

<?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 为我指明了正确的方向。

【讨论】：

【解决方案2】：

这就是问题所在。 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;
    }

【讨论】：

好的，谢谢@RachelGallen。我尝试简单地从 css 中删除该图像，但白色背景仍然没有达到视口边距。