Question

好吧，我几个小时一直在敲打这个，所以现在是时候把它扔到这里，看看是否有人可以提供帮助：

基本问题是我在html页面上有一个SVG，它的样式是响应式的，并调整到浏览器窗口的宽度。代码在IE和Chrome中运行得非常好，但是当Firefox窗口小于特定大小时，SVG会停止缩放。它会扩大规模。只是为了激怒我，似乎当我在Firefox中检查元素并查看代码时，SVG会正确调整大小以适应现在较小的查看区域。以下是我的意思截图：

SVG working in Chrome

SVG not working in Firefox

SVG in Firefox 'Inspect Element' view

这是我的代码，基本上是：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Glynne McReynolds</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>

<body>
<header>
    <img src="images/glynne-mcreynolds.svg" alt="Glynne McReynolds" title="Glynne McReynolds">
</header>
</body>
</html>

相关的CSS：

header {
    max-width: 500px;
    text-align: center;
    margin: 0px auto;
}
header img {
    width: 100%;
    height: auto%;
}

我应该注意到我还包括了modernizr.js的开发版本，但删除它并没有任何区别，所以我把它留了出来。

我尝试过的事情：

从SVG中删除宽度和高度声明。
将SVG作为对象嵌入，而不是嵌入img标记。

此处还有fiddle代码，这里是SVG。任何帮助将不胜感激。

Answer 1

您的Firefox屏幕截图显示该窗口比浏览器UI更窄（请注意截止工具栏），以便视口实际上比窗口更宽。

正如Robert上面提到的那样，UI无法缩小超过某一点通常是由于向UI添加非灵活元素的附加组件引起的....

为什么我的SVG在Firefox中无法正常扩展？

1 个答案: