html - 防止后台溢出不溢出:hidden

Question

在my site ，我目前在 #header 上使用 overflow: hidden 来防止背景溢出，它属于它的一个 child (#input，#backgroundfix 破解了 SVG 显示错误。

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

如何在不使用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>

Answer 1

我认为您应该摆脱导致 SVG 显示不佳的黑客攻击并改为修复 SVG。问题的解决Background image tiles have gap between them when using SVG image. How to solve in Chrome?应该可以帮助你。

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

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