我在 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>
(我无法将它们组合起来 - 背景是独立动画的。)
最佳答案
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 呢？)
关于css - 为什么第二个CSS背景会渗漏出来？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16278571/