在 IE9-10 中压缩 SVG 的背景大小 [英] Background-size with SVG squished in IE9-10

问题描述

我有一个带有背景图片的 div:

播放视频

具有以下 CSS:

div {背景图像:url('icon.png');背景图片:网址('icon.svg')，无；背景尺寸:40px 40px；背景重复:不重复；背景位置:90% 50%；填充:20px；宽度:150px；}

背景尺寸在 Firefox、Safari 和 Chrome 中受到尊重.在 IE8 中，SVG 被替换为 PNG 文件.但是，在 IE9 和 IE10 中，SVG 文件的大小被大幅缩小.问题似乎与 div 的宽度和高度有关.如果我添加 150px 的高度，SVG 将正确呈现.如果我把它变小(即 100 像素)，图形就会开始缩小.

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

解决方案

确保您的 SVG 指定了 width 和 height.如果您是从 Illustrator 生成的，请确保未选中响应式"框，因为此选项会删除宽度和高度.

I have a div set with a background image:

<div>Play Video</div>

with the following 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;
}

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.

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?

解决方案

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.

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