我使用 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;
}
最佳答案
这是缩放问题。将多边形的底部坐标从 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>
关于html - chrome 中 div 之间的奇怪空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29879500/