我正在使用数据在浏览器中渲染基于SVG的表和图表（使用Snap.js）。在非视网膜屏幕上，所有显示都很好，但是当我将包含表格的浏览器窗口移到视网膜屏幕上时，表格移到父容器之外。
据我所知，这与显示器本身以及浏览器如何与显示器进行通信有关，而不是与CSS无关（我曾尝试使用父级和子级的不同位置值来无济于事...并且它已经可以在非视网膜上正常工作了。
非视网膜： Table appears normal
视网膜： Table outside parent container
示例SVG标记：
<svg class="pond" width="800px" height="100%"><desc>Created with Snap</desc><defs></defs><g class="pond-container"><rect x="0" y="0" width="800px" height="100%" fill="#ffffff" stroke="rgba(0,0,0,0)" style="stroke-width: 0;" class="pond-container "></rect>
<g id="pond_widget_250" class="widget-translator widget-droppable" transform="matrix(1,0,0,1,478,330)"><g stroke="none" fill="rgba(0,0,0,0)" style="stroke-width: 0;" class="pond-widget widget-container pond-widget-group "><rect x="0" y="0" width="302" height="49" rx="0" ry="0" class="pond-widget pond-widget-rect "></rect></g><g id="pond_widget_251" class="widget-translator widget-droppable" transform="matrix(1,0,0,1,4,4)"><g stroke="#008eda" fill="#dbeffa" style="stroke-width: 1;" class="widget-container customized"><rect x="0" y="0" width="294" height="41" rx="0" ry="0" stroke="#008eda" fill="#dbeffa" style="stroke-width: 1px; stroke-dasharray: none;" class="pond-widget pond-widget-rect "></rect></g></g><g id="pond_widget_252" class="widget-translator " transform="matrix(1,0,0,1,70,20.0001)"><g stroke="#008eda" fill="#dbeffa" style="stroke-width: 1;" class="widget-container customized"><text x="0" y="0" stroke="none" fill="#008eda" style="stroke-width: 1px; stroke-dasharray: none; font-size: 14px; font-weight: 900; alignment-baseline: hanging; text-anchor: start;" class="pond-widget pond-widget-text ">Table Should Appear Below</text></g></g></g><g id="pond_widget_256" class="widget-translator " transform="matrix(1,0,0,1,481,403)"><g stroke="null" fill="rgba(0,0,0,0)" style="stroke-width: 1;" class="widget-container customized" id="table_255"><rect x="0" y="0" width="295" height="352.0000305175781" rx="0" ry="0" stroke="null" fill="rgba(0,0,0,0)" style="stroke-width: 1px; stroke-dasharray: none;" class="pond-widget pond-widget-rect "></rect>
<foreignObject width="295px" height="352.0000305175781px" style="
position: relative !important;
">
<div class="rt--view rt-table-view" xmlns="http://www.w3.org/1999/xhtml" style="left: 0;bottom: 0;" contentscalefactor="1.0">
<div class="grid-header" style="
float: none;
">
<span class="col col-0 equip_name cols-2">
<span>Equip Name</span>
</span>
<span class="col col-1 value cols-2">
<span>Value</span>
</span>
<!-- end for -->
</div>
<div class="grid-body" style="
float: none;
">
<div class="grid-row row-0">
<span class="col col-0 equip_name cols-2">
AC-03 2nd Flr South
</span>
<span class="col col-0 value cols-2">
37500
</span>
</div>
<div class="grid-row row-1">
<span class="col col-1 equip_name cols-2">
AC-06 Dining
</span>
<span class="col col-1 value cols-2">
31200
</span>
</div>
<div class="grid-row row-0">
<span class="col col-2 equip_name cols-2">
AC-01 1st Flr South
</span>
<span class="col col-2 value cols-2">
38700
</span>
</div>
<div class="grid-row row-1">
<span class="col col-3 equip_name cols-2">
AC-05 Tailor Shop
</span>
<span class="col col-3 value cols-2">
41100
</span>
</div>
<div class="grid-row row-0">
<span class="col col-4 equip_name cols-2">
AC-04 2nd Flr North
</span>
<span class="col col-4 value cols-2">
39600
</span>
</div>
<div class="grid-row row-1">
<span class="col col-5 equip_name cols-2">
AC-07 Kitchen
</span>
<span class="col col-5 value cols-2">
56100
</span>
</div>
<div class="grid-row row-0">
<span class="col col-6 equip_name cols-2">
AC-02 1st Flr North
</span>
<span class="col col-6 value cols-2">
39000
</span>
</div>
<div class="grid-row row-1">
<span class="col col-7 equip_name cols-2">
AC-08 MC Room
</span>
<span class="col col-7 value cols-2">
85500
</span>
</div>
<!-- hidden rows -->
<div class="hidden-rows-count">32 more row(s) hidden</div>
<!-- end if hidden -->
</div>
<!-- end if data.length -->
</div>
</foreignObject>
</g></g></g></svg>