css – SVG高度在Webkit浏览器中计算不正确

我有一个特定于Webkit浏览器(Safari和Chrome，Mac和PC)的问题。

我使用Raphael JS渲染SVG数据，并使用响应式布局来扩展SVG与浏览器窗口。使用JQuery将SVG设置为100％宽/高。包含的元素的宽度设置为百分比，以保持页面调整大小时的布局比例。

Webkit不能正确计算高度，它会在SVG图像周围增加额外的像素(有时数百);这打破了布局。

如果您在Webkit浏览器中打开以下链接，您将看到绿色的额外像素区域。如果您在safari中使用开发人员inpspector，您将看到SVG的报告大小大于显示的SVG。

http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html

如果您在Firefox或Opera中打开链接，您将看到它应该工作的布局(这里的绿色是由我故意设置的边距引起的)。

IE8有一个类似的问题，使用height：auto fixed，但这在Webkit中不起作用。

有谁有这个问题吗？有人有解决方案吗？

我认为这可能是一个Webkit错误(已经检查了夜间构建，问题仍然存在)，但在我记录之前，我以为检查以确保没有人先有解决方案。

解决方法

svg { max-height: 100%; }

WebKit错误记录在这里：https://bugs.webkit.org/show_bug.cgi?id=82489

我还向错误跟踪器添加了解决方法。