背景图像div周围的不需要的边框

时间:2013-04-25 15:06:51

标签: javascript html css mobile-safari background-image

我的背景图片周围有一条细线或边框。我通过javascript动态更改父div的高度,以便内部div(具有背景图像集)将“粘贴”到窗口的底部。

桌面浏览器上没有显示任何行,但在脚本运行后的移动浏览器上,通常会有一个细边框:

enter image description here

边框位于左侧,方式应位于右侧。有什么建议吗?

这是剧本:

<script type="text/javascript">
function layoutHandler(){
    if(window.innerHeight > 1061){
    var newsize = 150 + (window.innerHeight - 1061);

        document.getElementById("footerwrapper").style.height = newsize+'px';
    }
    else {
        document.getElementById("footerwrapper").style.height = '150px';
    }
}
window.onload = layoutHandler;

window.onresize = layoutHandler;
layoutHandler();
</script>

然后内部div设置如下:

#inner {
    background-color: #FFF;
    padding: 0px;
    height: 150px;
    bottom: 0px;
    width: 100%;
    position: absolute;
    background-image: url(Images/grad.png);
    background-repeat: repeat-x;
}

修改 好吧,经过测试后,我发现它的范围缩小了。 (这可能会令人沮丧地具体化)它在纵向模式下最明显地出现在iPad上。我关掉了“repeat-x”,它完全消失了。这让我尝试了一个更广泛的背景图像,这个图像在iPad的宽度范围内不会重复,并且它消除了这个问题。任何想法为什么发生这种情况?

1 个答案:

答案 0 :(得分:0)

我有同样的问题,删除repeat-x解决了它。我认为这是手机浏览器的错误。