2

好吧，我已经用头撞了这个几个小时了，所以现在是时候把它扔在这里了，看看是否有人可以提供帮助：

基本问题是我在 html 页面上有一个 SVG，它的样式是响应式的，并且可以调整到浏览器窗口的宽度。该代码在 IE 和 Chrome 中都可以正常工作，但在 Firefox 上，当窗口小于某个大小时，SVG 会停止缩放。它会很好地扩大规模。只是为了激怒我，似乎当我在 Firefox 中“检查元素”并检查代码时，SVG 会正确调整大小以适应现在更小的查看区域。这是我的意思的一些屏幕截图：

SVG 在 Chrome 中工作

SVG 在 Firefox 中不起作用

Firefox“检查元素”视图中的 SVG

这是我的代码，虽然很基本：

<!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标签嵌入。

这里还有一个代码，这里是SVG。任何帮助将非常感激。

4

1 回答 1

2

您的 Firefox 屏幕截图显示窗口比浏览器 UI 要窄（注意截断的工具栏），因此视口实际上最终比窗口宽。

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

于 2012-12-09T03:59:08.130 回答