小编cbm*_*trx的帖子

我正在从HTML文本内容创建动态生成的SVG.它在Chrome中运行良好,但当SVG数据转换为PNG进行下载时,Safari始终会出错.

令我困惑的是,没有发生跨浏览器的事情; 这都是从单一来源生成/下载的.即便如此,包括img.crossOrigin = ‘Anonymous’还没有帮助Safari克服它(大概)画布的origin-clean状态的问题.

function makeImage(canvas, pHeight, content) {

var ctx = canvas.getContext('2d');
var svgElementCode = '<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="600">' + 
    '<foreignObject width="100%" height="100%">' + 
    '<div xmlns="http://www.w3.org/1999/xhtml" style="height:' + (pHeight - 100) + 'px; font-size: 20px;">' + 
    content +  
    '</div>' + 
    '</foreignObject>' + 
    '</svg>';

var data = 'data:image/svg+xml,' + encodeURIComponent(svgElementCode);
var img = new Image();
img.crossOrigin = 'Anonymous';
img.src = data;

img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var canvasdata = canvas.toDataURL("image/png");
    var …

自从v3开始我一直在使用基金会,所以我没想到会有这种混乱.

在这种特殊情况下,我需要一个固定宽度的左列(大3),然后是剩余的流体/响应内容列(大9).

<div class="row">

    <div class="large-3 columns" id="sidebar" style="width: 300px">
    sidebar
    </div>

    <div class="large-9 columns" id="content">
    content
    </div>

</div>

问题是,缩小时,内容列在侧边栏下方包裹/被强制下降(甚至在超过下一个屏幕宽度阈值之前).我在#sidebar中尝试了"固定"和"粘性"类,但它们似乎不会影响此行为.

如果存在(Foundation？)解决方案,我不想开始破解CSS.

有什么建议？