背景大小与SVG在IE9-10挤压 [英] Background-size with SVG squished in IE9-10

问题描述

我有一个div设置了背景图片：

I have a div set with a background image:

<div>Play Video</div>

使用以下CSS：

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

背景尺寸在Firefox，Safari和Chrome中受到尊重。在IE8中，SVG由PNG文件替换。但是，在IE9和IE10中，SVG文件大小下降。问题似乎链接到div的宽度和高度。如果我添加一个150px的高度，SVG正确呈现。如果我把它缩小（例如100像素），图形开始收缩。

The background size is respected in Firefox, Safari and Chrome. In IE8, the SVG is replaced by the PNG file. However, in IE9 and IE10, the SVG file is drastically sized down. The problem seems to be linked to the width and height of the div. If I add a height of 150px, the SVG is rendered properly. If I make it smaller (i.e. 100px) the graphic starts to shrink.

有没有人找到一种方法来解决这个问题在资源管理器？有没有办法告诉IE使用background-size值独立于div的宽度和高度？

Has anyone found a way to fix this issue in Explorer? Is there a way to tell IE to use the background-size value independently of the width and height of the div?

推荐答案

请确保您的SVG具有指定的 width 和 height 。如果您是从Illustrator生成它，请确保响应框已取消选中，因为此选项会删除宽度和高度。

Be sure that your SVG has a width and height specified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.

这篇关于背景大小与SVG在IE9-10挤压的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！