背景图片div周围不需要的边框 [英] Unwanted border around background image div

问题描述

我的背景图片周围有一些线条或边框。我通过javascript动态地改变父div的高度，以便内部div（它具有背景图像集）将粘到窗口的底部。

桌面浏览器上不显示任何行，但在脚本运行后的移动浏览器上，通常会有一个很薄的边框：

<边界在左边，它应该在右边。任何建议？

这是脚本：

 <脚本类型= 文本/ 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; 
宽度：100％; 
位置：绝对; 
 background-image：url（Images / grad.png）; 
 background-repeat：repeat-x; 
} 
  

编辑：
好​​的，之后测试这一点，当它发生时我缩小了一点。 （这可能会令人沮丧地特定）在iPad上以纵向模式显着发生。我关掉了repeat-x，它完全消失了。这导致我尝试了一个更宽的背景图像，它不会在iPad的宽度内重复出现，并且带走了这个问题。任何想法为什么会发生这种事？

解决方案

我遇到了同样的问题，删除 repeat-x 。我认为这是手机浏览器的bug。

I am getting a slight line or border around my background image. I am dynamically changing the height of the parent div via javascript so that the inner div (which has the background image set) will "stick" to the bottom of the window.

No line appears on the desktop browsers, but on the mobile browser after the script runs, there is usually a thin border around it:

The border is on the left and the way it should be is on the right. Any suggestions?

This is the script:

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

And then the inner div is setup like so:

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

Edit: Okay, after testing this a bit more I narrowed down when it happens. (This might get frustratingly specific) It happens most noticeably on the iPad in portrait mode. I turned off the "repeat-x" and it goes away completely. That led me to try a much wider background image which would not be repeating within the width of the iPad and it took away this issue. Any ideas why the heck this is happening?

解决方案

I had the same problem and removing repeat-x solved it. I think it is bug of phone browsers.

这篇关于背景图片div周围不需要的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！