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

Question

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

在firefox中可以正常使用，但是在chrome中箭头变窄了，左右两边都可以看到背景，为什么？

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 了解更多信息）如果您想获得可靠的尺寸，请改用像素值。 （理论上，如果您的 svg 为 21px 宽，1.3em 周围的东西应该可以工作，但为什么不直接使用 21px 呢？）

Answer 2

chrome 中有一个错误，它不允许它按照给定的here 拉伸 svg 图像

见评论#20

SVG 内部的高度和宽度必须设置为“px”。 "%" 确实会阻止 SVG 在 Chrome 中工作。 必须包含 preserveAspectRatio="none" 才能使 CSS background-size 起作用。

Answer 3

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