我在 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;
}
最佳答案
这就是问题所在。 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;
}
关于html - 如何在 Safari 浏览器中将背景颜色拉伸(stretch)到视口(viewport)的左侧和右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32059253/