svg背景图片的位置始终在Internet Explorer中居中，尽管背景位置为：左居中；

我正在使用SVG徽标作为背景图片，但似乎无法使其在Internet Explorer （编辑：和Safari）中正确对齐到左侧。

容器看起来像这样：

<div id="header">
    <div id="logo"></div>
</div>

搭配款式：

#header{
    width: 100%;
    max-width: 1200px; 
    height: 100%;}

#logo{
    background: url(../images/ss_logo.svg);
    background-position: left center;
    width: 100%;
    height: 100%;
    float: left;}

您可以看到<div>应当跨越其父项的100％，但在元素左侧显示徽标。在Chrome和Safari中这可以正常工作，但徽标始终<div id="logo">位于IE中的中心。

似乎很难找到信息，其他人也遇到同样的问题吗？

这是该问题的示例版本的链接，绿色框是SVG。

问题不在于CSS，而在于SVG。SVG将增长，以填充整个元素框的背景（如预期的那样）。SVG规模如何成为控制因素：

viewBox="0 0 width height"在<svg>元素上设置（以像素为单位）属性，然后删除其width和height属性。您还需要preserveAspectRatio="xMinYMid"在svg 元素上设置（x /垂直左对齐，y /水平中间对齐）。至少与Internet Explorer 10和11兼容。

<svg viewbox="0 0 64 64"
    preserveAspectRatio="xMinYMid">
    … </svg>

了解有关preserveAspectRatio和viewBox属性的更多信息。来源IEblog中的“ SVG入门”。

以我为例，添加“ width”和“ height”值解决了ie9-11上的问题。

如果我们提供背景大小，它将在IE中正常工作

下面是示例代码

.menu ul li a.explore {
background: url(../images/explore.svg) no-repeat left center;
background-size: 18px 18px;
}

可接受的答案有效，但这是另一个解决方案。

在SVG中包含尺寸以使其与视图框尺寸相同也可以解决问题。

width="496px" height="146px" viewBox="0 0 496 146" 

如果您和我一样，并且在Illustrator中编辑/保存了SVG，请取消选中“保存”对话框中“高级选项”中的“响应”复选框。然后将包括尺寸。

（由于它具有可伸缩性，因此顾名思义就是“响应式”。因此，此设置似乎有点多余。）

IE 8-11在将SVG放置在无重复的背景中时，会自动对左右两侧进行匀光填充以缩放以适合其尺寸。这会在图像级别创建图像的居中效果。含义：它扩大了图像两侧的空白区域以填充容器。

然后，新图像为其元素的宽度为100％。这就是为什么position：left无效的原因，它已经被留有填充了。

必须限制背景元素的容器以防止过度膨胀（通过填隙）。例如：最大宽度

div#logo{
    background-image: url(/img/logo.svg) no-repeat;
    max-width: 140px;
    margin: 0 auto auto 0;
}

图像仍将居中于140像素内，但不再超出该点浮动。

就我而言，以下属性有效

preserveAspectRatio="xMinYMin"

解决方案：尝试另一个.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">

事实证明，以下几行代码可以将您的svg变成非居中元素：

display: inline-block;

仍然不是最理想的解决方案，但它可以工作。