我在使用 Raphael JS 渲染 SVG 数据,并使用响应式布局来随着浏览器窗口缩放 SVG。这些 SVG 的宽度/高度都设置为 100% ,并通过 JQuery 进行设置。包含这些 SVG 的元素的宽度设置为百分比,以保持布局的比例随着页面的调整而改变。
问题在于 Webkit 浏览器无法正确计算高度,在 SVG 图像周围添加了额外的像素(有时是数百个),这会破坏布局。
如果您在 Webkit 浏览器中打开以下链接,您将看到绿色的额外像素区域。如果您在 Safari 中使用开发人员检查器,则会看到报告的 SVG 大小大于显示的 SVG。
http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html
如果您在 Firefox 或 Opera 中打开此链接,则会看到正常工作的布局(这里的绿色是由我故意设置的边距引起的)。
IE8 也存在类似的问题,但使用 height:auto 可以解决,但在 Webkit 中不起作用。
是否有其他人遇到过这个问题?有没有什么解决方法?
我认为这可能是 Webkit 的一个 bug(已检查了 Nightly Build 版本,问题仍然存在),但在记录之前,我想先检查一下是否有其他人有解决方案。
function fixWebkitHeightBug(){
/* 调整校园元素大小 */ var campusW = 282; var campusH = 288; var curCampusW = $('#campus').width(); var newCampusH = heightInRatio(campusH,campusW,curCampusW); $('#campus').height(newCampusH); function heightInRatio(oH,oW,nW){ return (oH / oW * nW); } }$(window).resize(function() {
fixWebkitHeightBug(); }); $(document).ready(function() { fixWebkitHeightBug(); }); - Barry