Question

快速介绍

我正在开展涉及一些激烈的数学渲染的网络项目，我使用最新的MathJax版本来完成它。当我在其中一个页面添加内容时，我发现了一个非常奇怪的错误。复制粘贴我的网页的完整源代码并不聪明，所以我将其简化为此。

源代码

<html>
<head>
    <style>
        h3 {  font-size: 1.3em;  }
        h4 {  font-size: 1.2em;  }
        h5 {  font-size: 1.1em;  margin: 1em 0 0.5em;  }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_SVG"></script>
</head>
<body>
    <h3>H3 Header</h3>
    <h4>H4 header</h4>
    <h5>H5 header</h5> 0\(0\) 1\(1\) 2\(2\)
    <h5>H5 header</h5> 0\(0\) 1\(1\) 2\(2\)
    <h5>H5 header</h5> 0\(0\) 1\(1\) 2\(2\)
    <h5>H5 header</h5> 0\(0\) 1\(1\) 2\(2\)
</body>
</html>

这里也是jsFiddle playground.

输出

Screenshot of the resulting webpage

问题

在某些时候SVG的定位和尺寸变得混乱，然后重新恢复正常（仔细观察所提供的图像）。

重现错误

仅当SVG用作输出模式时才会出现Bug。 Chrome和Safari中的外观和行为有所不同，没有机会与其他浏览器一起检查。

如果您

，则会更改其“位置”

添加，删除或重新定位标题
更改任何标题的font-size
更改margin

问题

发生了什么事？

Answer 1

Chrome和Safari等Webkit浏览器围绕子像素值：Web-Kit and sub-pixel values, workaround?

在您的情况下，您以em为单位给出标题字体大小和边距，MathJax给出<svg>元素的宽度/高度，其中包含ex个单位的字形。两者都可能产生像素的分数（例如，在Firefox中，h5 margin-top得到15.4px，svg字形周围的跨度高度为17.5333px。Chrome使用不同的字体，表示17.6px的边距 - 顶部，但跨度的高度为18px。）

根据您所在的行，MathML内容周围的span元素的高度可能相差一个像素，并且相对于用于周围行的字体的基线定位框。同时，svg内的字形以相对于其边界框的 upper 边界的坐标绘制，并且不会进一步舍入像素分数。因此，字形基线最终可能与周围的线框不同。

这是一个MathJax错误吗？

我会说是的。该库渲染的字形数量，但将它们定义为纯<path> s。如果它使用了svg <font>和<glyph>元素，则会定义通常的字体指标，如x height，显性基线等，并且垂直定位对于浏览器来说会更简单。

虽然在同一行上使用MathML和常规文本时出现问题，但似乎Webkit舍入甚至会在公式中出现问题，如this issue所示。

MathJax SVG对标题和CSS

快速介绍

源代码

输出

问题

重现错误

问题

1 个答案: