我有一个带有背景图像的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),图形就会开始缩小.

有人在Explorer中找到了解决此问题的方法吗?有没有办法告诉IE使用背景大小值而不依赖于div的宽度和高度?

推荐答案

确保您的SVG指定了widthheight.如果您是从Illustrator生成的,请确保取消选中"Responsive"框,因为此选项会删除宽度和高度.

Css相关问答推荐

如何在CSS中平滑线性平移动画

在css网格中用一个锚标签(顶部/底部边距)包装图像?

将特定样式应用于递归Angular 元素

如何使用 Cypress 从 React 下拉列表中进行 Select

当滚动量较小时,在滚动问题上动画粘性导航

如何让我的注册按钮在我的网站上像球一样 skip ?

有没有办法让它比它更敏感?

如何在 CSS 中更改 ::marker SVG colored颜色 ?

卡在 CSS 中的grid-template-columns中

我怎样才能让这个边框出现在按钮元素的上方?

css中的背景图像没有被缓存

弹性盒项目之间的间距

重置子元素的不透明度 - Maple Browser (Samsung TV App)

在 css 中使用 FontAwesome 或 Glyphicons :before

如何动态生成用逗号分隔的类列表?

让 div 占据 100% 身体高度,减go 固定高度的页眉和页脚

矩形图像的 CSS 圆形裁剪

当子元素水平溢出时,为什么忽略父元素的右填充?

使用 CSS 更改
高度

如何在 CSS 中给出背景图像路径?