沿背景图像顶部的奇怪细线(仅在特定设备上可见)!

时间:2015-08-07 02:53:19

标签: android border samsung-mobile

我花了太多时间试图解决这个问题,而且我完全难过了。有人想放手一搏吗?

使用WPTouch平台(特别是"标题 - 底部""页脚顶部& ;,页眉和页脚符合页面内容的位置)。

它不会出现在桌面预览中,也不出现在iPhone上,但它出现在我的三星Galaxy S6上。

以下是导致我麻烦的代码:

<div class="full-width-background">
<div class="fwb-content">
<div class="homeHeaderDescription">A refreshingly simple collection of one-pot meals and practical tips for daily self-care.</div>
<div class="homeHeaderCook"></div>
</div></div>
<div class="header-bottom"></div>

如果我在不添加内联内容的情况下使用相同的代码,则不会出现此问题,例如:

<div class="full-width-background">
<div class="fwb-content">
</div></div>
<div class="header-bottom"></div>

或者当我自己使用header-bottom时:

<div class="header-bottom"></div>

这是上面div的CSS ...

.full-width-background {
margin-left: -2000px !important;
margin-right: -2000px !important;
margin-top: -35px;
}

.fwb-content {
padding-left: 2000px;
padding-right: 2000px;
padding-top: 10px;
padding-bottom: 20px;
border: 0px !important;
background-image: url('http://thenourishedcook.com/wp-content/uploads/2015/07/footer_bg.jpg');}

.header-bottom {
height: auto;
width: auto;
background-image: url('http://thenourishedcook.com/wp-content/uploads/2015/07/header_bottom_border.jpg');
background-repeat: repeat-x;
margin-left: -2000px !important;
margin-right: -2000px !important;
margin-top: -45px;
padding-bottom: 10px;
padding-top: 60px;
position: relative;
z-index: 2;}

该网站是thenourishedcook.com,但是,移动版本不是直播版,需要密码才能查看。如果有人可以提供帮助,我很乐意私下提供......

非常感谢!

P.S。如果我改变了z-index并在.header-bottom之上创建了.fwb-content堆栈,这确实会让这条线消失......但是,它会导致一大堆其他问题,所以我会这样做希望尽可能避免这种情况......

更新:

我不确定这是否是最好的解决方法,但添加以下CSS会将其清除:

background-position: center center;
background-repeat: repeat; 

0 个答案:

没有答案