Question

在my site中，我目前正在overflow: hidden上使用#header，以防止背景溢出，该背景属于其中一个孩子（#input，带有SVG被#backgroundfix）攻击的不正确错误。

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

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

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

摆脱你的backgroundFix div，在另一个背景上添加这些css规则

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

Answer 2

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

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

摆脱overflow，摆脱#backgroundfix并使用已修复的SVG。然后它应该工作。

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

2 个答案: