防止后台溢出而不溢出：隐藏答案

【问题标题】：Prevent background overflow without overflow:hidden防止后台溢出而不溢出：隐藏
【发布时间】：2014-03-05 15:12:45
【问题描述】：

在my site 中，我目前在#header 上使用overflow: hidden 来防止背景溢出，该背景属于它的一个孩子（#input，SVG 显示错误被#backgroundfix 破解） .

但是，我发现我必须将溢出保留为其默认值，因为它会干扰我网站中的其他内容。

如何在不使用overflow属性的情况下切断或防止#input的背景溢出？希望以一种得到广泛支持的方式。

HTML：

<header id="header" role="banner">
    <section id="logo"></section><section id="input">
        <form method="get">
            <input id="searchInput" type="text" name="search" autocomplete="off" autofocus x-webkit-speech value="Leonirdo" onfocus="this.value = this.value;" />
        </form>
    </section>
    <div id="backgroundFix"></div>
</header>

【问题讨论】：

请不要发布指向实时网站的链接。这些将在未来消失或修改。把相关代码贴在这里，放到jsfiddle.net或者jsbin.com
你可以将#input 子元素包裹在一个新的 div 中并将其设置为溢出吗？假设你给它的宽度和高度与#header 相同。
@badAdviceGuy 这是个坏建议吗？我宁愿不更改html。但我只是试过了，不，我不能。这仍然会干扰网站的其他部分。
overflow 到底有什么问题？它是如何干扰的？
@Palec 当我尝试使用 jQuery 修复它时它会隐藏我的标题。

标签： html css svg

【解决方案1】：

我认为您应该摆脱 SVG 显示不良的 hack 并改为修复 SVG。问题Background image tiles have gap between them when using SVG image. How to solve in Chrome? 的解决方案应该可以帮助您解决这个问题。

总结它所说的：问题可能是计算图像某些部分的尺寸时的舍入误差。没有白色条纹，但在渲染到整个像素时会弹出。将里面的坐标四舍五入到整数，白色条纹应该消失。

摆脱overflow，摆脱#backgroundfix，使用修复后的SVG。那么它应该可以工作了。

【讨论】：

【解决方案2】：

去掉你的backgroundFix div，在另一个有背景的div上添加这些css规则

background-position: 2px;
left: 20%;
top: -200px;
background-size: cover;

【讨论】：

我无法删除 backgroundFix div。它修复了当视口足够宽时重复时 svg 背景中的错误。
@gomangomango 我想戴夫知道这一点。这段代码也应该修复它。您使用的修复程序确实……笨拙。顺便说一句，问题可能应该在 SVG 本身中得到解决。 stackoverflow.com/q/11201248/2157640
@Palec 啊，好的。它有效，但我在左边得到了这个奇怪的白色垂直条纹。这是一张图片：i.imgur.com/x5OjtZn.png
戴夫，请看我上面的，之前的评论。
@gomangomango 第三次：阅读我在评论中链接到的问题，该问题同时获得了 3 个赞。在计算图像某些部分的尺寸时，问题可能是舍入误差。没有白色条纹，但在渲染到整个像素时会弹出。将内部坐标四舍五入为整数，白色条纹应消失。