为什么我的SVG无法在Firefox中正确缩放？

好吧，我一直在敲我的头这一个了几个小时，所以现在是时候在这里扔，看看是否有人能帮助：为什么我的SVG无法在Firefox中正确缩放？

的基本问题是，我已经上了一个SVG一个HTML页面，它的样式是响应式的，并根据浏览器窗口的宽度进行调整。该代码在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。任何帮助将非常感激。

来源

2012-12-08 Glynne McReynolds

它对我的Firefox工作正常。它缩小到我正在采取的饮用水范围。 –

嗯。有趣。所以我仍然不知道究竟发生了什么，但是您的评论鼓励我卸载Firefox并从全新安装开始，现在它可以正常工作。我看不出应该如何工作，因为我的新Firefox是相同的版本，并且我保留了所有附件和扩展的完整性。虽然有效，所以我不能抱怨。 :) –

很高兴知道！ :)希望它的FF版本的一些问题？ –

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

正如罗伯特上面提到的UI无力收缩过去的某个点往往是由加载项添加非弹性元件的UI造成....

来源

2012-12-09 03:59:08

为什么我的SVG无法在Firefox中正确缩放？

回答

相关问题