在IE9-10中压缩SVG时的背景大小
在IE9-10中压缩SVG时的背景大小
提问于 2014-02-18 06:27:30
我有一个带有背景图片的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的宽度和高度？
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-04-10 02:23:22
确保您的SVG指定了width和height。如果您是从Illustrator生成的，请确保取消选中"Responsive“框，因为此选项会删除宽度和高度。
Stack Overflow用户
发布于 2016-03-03 23:44:52
正如mbxtr所说的那样，为SVG添加一个宽度和高度对我来说几乎是可行的。我还需要添加preserveAspectRatio="none slice"来让它在IE中响应性地工作。
Stack Overflow用户
发布于 2014-02-19 00:51:22
嗯，看起来没有解决的办法。惊喜吧。毕竟是IE。我最终使用了以下代码：
div {
padding: 20px;
width: 150px;
position: relative;
}
div:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 50%;
right: 30px;
margin-top: -20px;
background-image: url('icon.png');
background-image: url('icon.svg'), none;
}我更喜欢更简洁的版本，但这个技巧适用于所有现代浏览器，包括IE8、9和10 (可能是11，但我没有测试)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21840551
复制相关文章
相似问题