svg背景图像的位置始终以Internet Explorer为中心，尽pipe背景位置：左中心;
我正在使用SVG徽标作为背景图像，我似乎无法使其在Internet Explorer中正确alignment（编辑：和Safari） 。
容器看起来像这样：
<div id="header"> <div id="logo"></div> </div> 随着风格：
#header{ width: 100%; max-width: 1200px; height: 100%;} #logo{ background: url(..http://img.dovov.comss_logo.svg); background-position: left center; width: 100%; height: 100%; float: left;}
您可以看到<div>应该跨越其父项的100％，但在元素的左侧显示徽标。 这在Chrome和Safari中运行良好，但徽标始终位于IE中的<div id="logo">中。
信息似乎真的很难find这个，有没有其他人有同样的问题？
下面是一个问题示例版本的链接，绿色框是SVG。
问题不在于你的CSS，而在于你的SVG。 SVG将会增长以填充整个元素框的背景（如预期的那样）。 您的SVG规模如何成为控制因素：
在<svg>元素上设置一个viewBox="0 0 width height" （以像素为单位）的属性，并删除它的width和height属性。 您还需要在svg元素上设置preserveAspectRatio="xMinYMid" （x /垂直左alignment，y /水平中间alignment）。 这至less适用于Internet Explorer 10和11。
<svg viewbox="0 0 64 64" preserveAspectRatio="xMinYMid"> … </svg>
了解有关preserveAspectRatio和viewBox属性的更多信息。 来源， IEblog中的“SVG入门” 。
在我的情况下，添加“宽度”和“高度”值解决ie9-11上的问题。
接受的答案是诀窍，但这是另一个解决scheme。
在SVG中包含维度，使它们与viewbox维度相同，这是个诀窍。
width="496px" height="146px" viewBox="0 0 496 146"
如果你像我一样，你在Illustrator中编辑/保存SVG，请在保存对话框的高级选项中取消选中“响应”checkbox。 然后尺寸将被包括在内。
（因为它是可扩展的，所以定义是“响应式”的，所以这个设置似乎有点多余）。
IE 8-11，将SVG置于不重复的背景中时，会自动均匀地填充左侧和右侧，以适合缩放。 这在图像层面上创build图像的居中效果。 含义：它扩大图像两侧的空白区域以填充容器。
新图像是其元素宽度的100％。 这就是为什么position：left没有任何作用，它已经被填充了。
背景元素的容器必须被约束以防止过度膨胀（通过匀场）。 例如：最大宽度
div#logo{ background-image: url(/img/logo.svg) no-repeat; max-width: 140px; margin: 0 auto auto 0; }
图像仍然会在140像素内居中，但不会再超出这一点。
解决scheme：尝试另一个.svg，这里有一些样例头：
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.5, 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" width="500px" height="82px" viewBox="0.5 1000.5 500 82" enable-background="new 0.5 1000.5 500 82" xml:space="preserve">
事实certificate，下面这行可以把你的SVG变成一个不居中的元素：
display: inline-block;
仍然不是最理想的解决scheme，但它的工作。
