镀铬中div之间的奇怪空间

时间:2015-04-26 15:22:11

标签: html css html5 css3 google-chrome

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

检查出来:http://www.predatordesign.de/temp2

屏幕截图:enter image description here

本节的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;
    }

1 个答案:

答案 0 :(得分:0)

这是扩展问题。将多边形的底部坐标从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>