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

前端之家收集整理的这篇文章主要介绍了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

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

原文链接:https://www.f2er.com/css/219800.html

猜你在找的CSS相关文章