html - chrome 中 div 之间的奇怪空间

Question

我使用 chrome 在我的新网站上的两个 div 之间有一个奇怪的空间。

查看:http://www.predatordesign.de/temp2

屏幕截图:

本节的 CSS:

.background-arrow {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 20px;
        background: url(../img/background-arrow.svg) center bottom no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        z-index: 10;
    }

Answer 1

这是缩放问题。将多边形的底部坐标从 20 更改为 21。

编辑后的 ​​SVG 必须如下所示:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 2920 20" enable-background="new 0 0 2920 20" xml:space="preserve">
<polygon fill="#333333" points="0,21 0,0 1445.5,0 1460,17 1474.5,0 2920,0 2920,21 "/>
</svg>