svg背景图像位置始终在Internet Explorer中居中,尽管背景位置:左中心;

Question

我使用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.

Answer 1

问题不在于您的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入门".

Answer 2

在我的情况下,添加"width"和"height" - 值解决了ie9-11的问题.

Answer 3

接受的答案可以解决问题,但这是另一种解决方案.

包括SVG中的尺寸,使它们与视图框尺寸相同就可以了.

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

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

(由于它是可扩展的,它的定义是'响应'.所以这个设置似乎有点多余.)

Answer 4

如果我们给出背景大小,它将在IE中工作

下面是示例代码

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

Answer 5

IE 8-11,当在没有重复的背景中放置SVG时,自动均匀地调整左侧和右侧以使其适合缩放.这在图像级别创建了图像的居中效果.含义:它扩展图像两侧的空白区域以填充容器.

然后新图像的元素宽度为100%.这就是为什么position:left没有效果,它已经包含了padding.

必须约束背景元素的容器以防止过度扩展(通过匀场).例如:max-width

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

图像仍将在140px内居中,但不会再超出该点.