Safari滚动条和；SVG

问题：Safari不是在玩球，而是用滚动条渲染我的SVG图像

问题的改进版本：“如何在Safari中根据纵横比填充设定的宽度并计算高度？”（感谢Phrogz）

相关代码：

SVG文件

 viewBox="0 0 800 800"

（未规定高度或宽度）

.objectwrapper{
最大宽度：600px；
最小宽度：150px；
右边距：自动；
左边距：自动；
}
.objectdiv{
最大宽度：60%；
右边距：自动；
左边距：自动；
显示：块；
}

---

您在Safari中获得一个滚动条，因为：

对象上的
height=“100%”
使其与身体一样高，并且

因为

默认为

display:inline

，所以在对象下面会有一个额外的基线（4px-6px）。100%+任何东西都比窗口高，因此会显示一个滚动条

如果您能够明确最终演示文稿的具体内容，您的

的高度应该是多少-我可以帮助您使其在跨浏览器中工作

您很可能希望a）通过CSS在

上设置

显示：阻止
，和/或b）从
中删除
height=“100%”
。（如果需要跨浏览器高度控制，请通过CSS而不是表示属性设置高度。）

您可以在



固定版本在


（HTML4与XHTML的使用与问题或修复无关。）
我在Windows上Safari5下的SVG也有类似的问题。它显示滚动条没有明显的原因

在这里为我找到了一个解决方案：：

我必须在文本编辑器中打开SVG，并将SVG节点的高度属性从79.999px四舍五入到80px。不知何故，Safari5不喜欢这些字段中的奇数。
我对在Windows上使用Safari的SVG也有同样的问题。SVG有垂直和水平滚动条

然而，我在一个文本编辑器中打开了SVG文件，我有奇怪的高度和宽度属性。我将它们改为偶数，解决了这个问题。
请注意，您的HTML元素上声明了一个XHTML名称空间，但它是一个HTML4 DOCTYPE。（正如未关闭的
meta
标签所示，您的内容显然不是XHTML。）@Phrogz谢谢，我会更新doctype。对于这个实际问题的看法，我将在这里查看它（如果人们希望看到最终的源代码，这个站点将来应该有其他svg）www.gamemorize.comW/H被设置为100%，以确保所有svg都被呈现，但我现在删除了它，这没有什么区别。我希望对象填充其分配的CSS宽度的100%，然后保持比例，给出高度=宽度。Safari似乎分配了一个固定的高度。注意窗口缩小/放大时滚动条的高度。好的，那是一个单独的问题。“我如何获得一个
来填充设置的宽度，并根据Safari中的纵横比计算高度？”如果您查看我的“固定”版本（设置宽度但不设置高度），您将看到它在FF和Chrome中适当调整了大小。根据我的示例XHTML，指定宽度而不是高度可能是您想要做的。为了解决Safari的问题（如果你没有真正提出问题并找到更好的答案），我只需添加一点JavaScript，使高度与宽度保持一致（考虑到你的1:1纵横比）。@Adam我已经编辑了我的答案，并提供了关于出错原因的清晰细节。嘿，Phrogz，我以前使用过你的想法，它们对我很有帮助，但在你的网站上，如果你放大，请注意Safari是如何提供滚动条的。任何其他浏览器都不会出现这种情况。请重新设置高度。我希望它在物体中保持它与宽度的比例。在我的live版本中，它是800px x 792px。@AdamNarbutt是的，这似乎是Safari中的一个缺陷，在调整窗口大小时没有正确地重新计算基于高度的元素，并且页面中没有强制特定高度的内容。这两个示例在当前（7.0）Safari中看起来完全相同（也就是说，它们似乎已经修复了错误）。