css - svg 无法在 ie9 中使用 css 调整大小

标签 css html internet-explorer svg

好的,开始吧:

这是我的网页:http://ingenious.jit.su/themes

如果您在 firefox 中查看它,您会注意到六个白色面板中每个面板的右上角都有一个红色小图标 (svg)。如果您查看该图像,您会注意到它的原始大小是 640 x 480。它很小是因为有一个 css 规则更改了 img 标签的大小,其中引用了 svg。

错误在这里:IE9 没有根据 css 规则调整图标大小。它只是剪掉了它的左上角。如果您使用 IE9 开发人员工具调整 css 规则,您就会明白我的意思。

我四处搜寻并确认我一直在遵循大多数 svg 最佳实践,例如包括不只是 100% 的宽度和高度值,包括视口(viewport)等,但没有运气。 IE9 仍然通过裁剪而不是缩放来响应 css 规则。

任何帮助都会很棒!

更新 已修复!我很笨,我的视口(viewport)不见了。凌晨 3 点不再编码。

最佳答案

您是否链接了 svg? 例子

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> enter svg here </svg>

我在 ie9 上遇到了很多 svg 问题:)

如果这有帮助,我在查看页面时遇到此错误

SCRIPT438:对象不支持属性或方法“addEventListener”
followbar.js,第 3 行字符 3

这是我在评论中谈论的两个点的一个更好的例子

<img class="theme-icon" id="/recruitment-and-retention" src="../images/recruitment-and-retention.svg"/>

关于css - svg 无法在 ie9 中使用 css 调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16019574/

相关文章:

html - Bootstrap 对齐项无法按预期工作

css - 使用媒体查询景观

html - 如何将链接添加到与 Bootstrap 内联的标题元素?

javascript - 使用 gulp-file-include 从 HTML 模板到文件的相对路径

javascript - 在不同的浏览器和设备上呈现不同的 HTML

javascript - 当 AJAX 请求到具有无效证书的服务器时如何抑制 SSL 错误

html - IE 无法显示部分 Wordpress 网站

css - Joomla 模板无法在 IE8 上正确显示

gradient - 如何在渐变背景上制作带有阴影的文本渐变?

CSS3 框阴影 : both, 外部和内部