为什么第二个CSS背景会流血？

Question

我在css中使用双重背景。第一个是箭头，第二个是渐变。

它工作正常，在Firefox，但在镀铬的箭头是窄，背景是在左，右两侧可见的，为什么呢？

fiddle。

HTML：

<div id="up"></div> 

CSS：

#up { 
    width: 1.5em; 
    height: 1em; 
    background: 
     url('https://dl.dropboxusercontent.com/u/60476509/up-arrow-waiting-top.svg') no-repeat, 
     linear-gradient(to top, #FF9400, #FFF000); 
    background-size: 100% 100%, 100% 100%; 
} 

SVG：

<svg 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:cc="http://creativecommons.org/ns#" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
    width="20.819946" 
    height="16.14336" 
    id="svg2" 
    version="1.1" 
    inkscape:version="0.48.2 r9819" 
    sodipodi:docname="up-arrow-waiting-top.svg"> 
    <defs 
    id="defs4" /> 
    <sodipodi:namedview 
    id="base" 
    pagecolor="#ffffff" 
    bordercolor="#666666" 
    borderopacity="1.0" 
    inkscape:pageopacity="0.0" 
    inkscape:pageshadow="2" 
    inkscape:zoom="22.627417" 
    inkscape:cx="12.599289" 
    inkscape:cy="16.296111" 
    inkscape:document-units="px" 
    inkscape:current-layer="layer4" 
    showgrid="false" 
    inkscape:window-width="1920" 
    inkscape:window-height="1018" 
    inkscape:window-x="-8" 
    inkscape:window-y="-8" 
    inkscape:window-maximized="1" 
    fit-margin-top="0" 
    fit-margin-left="0" 
    fit-margin-right="0" 
    fit-margin-bottom="0" 
    showguides="true" 
    inkscape:guide-bbox="true" /> 
    <metadata 
    id="metadata7"> 
    <rdf:RDF> 
     <cc:Work 
     rdf:about=""> 
     <dc:format>image/svg+xml</dc:format> 
     <dc:type 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
     <dc:title></dc:title> 
     </cc:Work> 
    </rdf:RDF> 
    </metadata> 
    <g 
    inkscape:groupmode="layer" 
    id="layer4" 
    inkscape:label="background" 
    style="display:inline"> 
    <path 
     style="color:#000000;fill:#ffffff;fill-opacity:1;stroke:#ff9400;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" 
     d="m 0.03125,0.03125 0,16.125 20.8125,0 0,-16.125 -20.8125,0 z M 10.5625,0.5 l 9.75,12.46875 -4.9375,0 -0.03125,2.6875 -9.5625,0 0,-2.6875 -5.28125,0 L 10.5625,0.5 z" 
     id="rect3877" 
     inkscape:connector-curvature="0" /> 
    </g> 
    <g 
    inkscape:groupmode="layer" 
    id="layer2" 
    inkscape:label="arrow" 
    transform="translate(-88.254623,-510.99503)" 
    style="display:inline"> 
    <path 
     style="fill:none;stroke:#4b72a7;stroke-width:1.10000002;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" 
     d="m 88.754623,523.96021 10.05788,-12.46518 9.762067,12.46518 -4.95499,0 -0.0159,2.67818 -9.582457,0 0,-2.67818 z" 
     id="path3811" 
     inkscape:connector-curvature="0" 
     sodipodi:nodetypes="cccccccc" /> 
    </g> 
</svg> 

（我不能将它们合并 - 背景是独立动画）

Answer 1

1）您的SVG：使用子像素值始终是有问题的：

width="20.819946" 
    height="16.14336" 

你应该SVG适应你，并更改为整数值width="20" height="16"或width="21" height="17"。

2）CSS：em是一个相对单位，并取决于你的基本字体大小，浏览器与EM处理时使用四舍五入。如果你想拥有可靠的尺寸使用的像素值，而不是（1EM = 16px的，一切都可能是圆形的，看到this table更多信息）。 （理论上，围绕1.3em东西应该工作，如果你的SVG是21px宽，但为什么不直接改用21px？）

Answer 2

您正在使用em作为宽度和高度，这是与浏览器中使用的字体相关的单位。 Firefox和Chrome很可能呈现不同大小的字体，因此相同的em值会导致不同的宽度。

Answer 3

有一个在浏览器的错误不允许它伸展SVG图像给出here

请参阅评论#20

SVG内部的高度和宽度必须设置为“px”。 “％”确实会阻止SVG在Chrome中运行。 preserveAspectRatio =“none”必须包含在CSS背景大小的工作中。