css – 背景大小与SVG压倒在IE9-10

前端之家收集整理的这篇文章主要介绍了css – 背景大小与SVG压倒在IE9-10前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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使用background-size值独立的div的宽度和高度?

解决方法

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

猜你在找的CSS相关文章