解决Windows 7上的Unicode问题

Question

我有一个渲染ANSI艺术ansidec的库。而且我在Windows 7上渲染时遇到问题（由于Unicode错误，所有浏览器都无法显示）。

这是演示：

https://codepen.io/jcubic/pen/ZVdJOd

我有这样的代码来解决以下问题：某些字符比m宽，然后比行高高：

var output = document.getElementById('output');
var format_ansi = ansi.format(function(styles, color, background, text) {
    var style = [];
    if (color) {
        style.push('color:' + color);
    }
    if (background) {
        style.push('background:' + background);
    }
    if (styles.bold) {
        style.push('font-weight:bold');
    }
    if (styles.italic) {
        style.push('font-style:italic');
    }
    if (styles.underline) {
        styles.push('text-decoration:underline');
    }
    text = Array.from(text).map(function(chr) {
        return '<span class="chr">' + chr + '</span>';
    }).join('');
    return '<span style="' + style.join(';') + '">' + text + '</span>';
});
function format(str) {
    output.innerHTML = format_ansi(str);
}
var url = 'https://cdn.jsdelivr.net/gh/jcubic/ansidec@master/example/unix.ans';
fetch(url).then((res) => res.text()).then(format);
document.querySelector('#file').addEventListener('change', function(event) {
    var reader = new FileReader();
    reader.onload = function(event) {
        format(event.target.result);
    };
    reader.readAsText(event.target.files[0]);
});

span {
    display: inline-block;
}
.chr {
    max-width: 1ch;
    overflow: hidden;
}
pre {
    line-height: 1em;
}

<input id="file" type="file" />
<pre id="output" style="background: black"></pre>
<script src="https://unpkg.com/ansidec@0.2.1/dist/ascidec.min.js"></script>

我将每个字符都用span包起来并设置最大宽度（如果由于ch单元错误而导致IE在IE上无法正常工作的话）。

问题是图形顶部的黑色空间（顶部第二行下方的黑色空间）和鼻子下方的白色线（不在Linux上）。

它与GNU / Linux上的几乎相同，该行略高。我只想知道为什么会有空白和黑线，以及如何解决它们（在Chrome / Windows 7上经过测试）。

我已尝试在跨度上设置overflow: hidden;，以使每行都有黑色空格，如果我删除line-height仍然会发生这种情况。在Windows 7上如何使其与Linux上的外观相同？这可能吗？

如果我设置display：inline，则黑色空格消失，但宽度不再起作用。

Answer 1

我想我已经解决了将每行都包裹在div中的问题：

function format(str) {
    output.innerHTML = format_ansi(str).split(/\n/).map(function(line) {
        return '<div>' + line + '</div>';
    }).join('')
}

并添加了此CSS：

div {
    max-height: 1em;
}

https://codepen.io/jcubic/pen/ZVdJOd