小编典典

IE9-10中压缩了SVG的背景大小

css

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

<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会正确呈现。如果将其缩小(即100px),图形将开始缩小。

是否有人在资源管理器中找到解决此问题的方法?有没有办法告诉IE独立于div的宽度和高度使用背景大小值?


阅读 310

收藏
2020-05-16

共1个答案

小编典典

确保您的SVG具有widthheight指定。如果您是从Illustrator生成的,请确保未选中“响应”框,因为此选项会删除宽度和高度。

2020-05-16