HTML 网页中 MathJax 中的内联数学与文本重叠

Question

内联数学有时会与后面的文字重叠。我想我已经能够查明问题的确切来源，这是样式表中的一行，但我不明白发生了什么以及我应该如何解决它。

这是我的style.css（这足以重现问题）：

section.post *, section > p * {
    max-width: 100%; }

这是我的 HTML 页面：

<html>
   <link href='../stylesheets/style.css' rel='stylesheet' type='text/css' />
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    TeX: { equationNumbers: { autoNumber: "AMS" } },
    inlineMath: [['$','$'], ['\(','\)']],
    processEscapes: true
    });
  </script>
  <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<!-- for mathjax support -->
  </head>
  <body>
    <div id='container'>
      <div class="content">
          <section class='post'>    
    <p>If \(T=100\) then compute \(1/{\sqrt{T}}\) again.</p>
</body>
</html>

输出如下：

任何帮助将不胜感激！

Answer 1

css * 适用于其他元素内的 ALL 元素。如果你删除星星，它会按预期工作，因为我假设你希望 p 最多 100% 宽，这样的规则应该仍然可以实现你想要的。

如您所知，MathJax 从一开始就获取文本的单个元素，并根据它找到的指定分隔符在内部将其拆分为多个 spans。这些 span 形成了一个相当复杂的嵌套结构（请自行检查您的浏览器开发工具，其中有 absolute 定位和 MathML 等等），其中一些 span 具有 display 属性设置为 inline-block。现在 max-width 不适用于 inline 个元素，但适用于 inline-block 个元素。根据您的规则，所有这些嵌套的 span 也会获得 max-width: 100% 规则集。

我们可以模仿这样的行为：

.truncated { white-space: nowrap; max-width: 10px; }
.ib { display: inline-block; }

<p>
  <span class="truncated ib">
    Text that is truncated due to <tt>inline-block</tt> and <tt>max-width</tt>
  </span>
  <span>
    Ensuing text
  </span>
</p>
<p>
  <span class="truncated">
    Text that is not truncated thanks to <tt>inline</tt> and <tt>max-width</tt>
  </span>
  <span>
    Ensuing text
  </span>
</p>

您需要精通 MathJax 才能准确了解发生这种情况的位置和原因，但我的猜测是，在某些中间步骤中，某些 inline-block span 的内容会得到一个max-width 由其父级内容间接设置或直接通过父级 css 设置，此时子级的 max-width 也具有意义（当父级时 max-width 百分比没有意义没有宽度）。当排版进行时，这个子框需要增长，但由于这个限制而不能增长。增长的需要可能来自正在下载的字体或其他原因，并且表达式之间也可能不同，因为某些表达式的排版方式与其他表达式不同。

我认为这里的教训是，您可以为 MathJax 输出的元素设置样式（通常为 font-size、color 等...），但在使用限制设置样式时我会小心关于维度属性（height、width、min-height、min-width、max-height、max-width），因为 MathJax 需要这种自由来做好工作如果您对 MathJax 排版过程没有大师级的洞察力，那么这种类型的样式也不太可能达到您想要的效果。

HTML 网页中 MathJax 中的内联数学与文本重叠

Inline math overlapping with text in MathJax in HTML webpage

html

javascript

css

mathjax