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

如何解决内联数学与 HTML 网页中 MathJax 中的文本重叠

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

这是我的 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>

输出如下：

任何帮助将不胜感激！

解决方法

css * 适用于其他元素内的 ALL 元素。如果您删除星星，它会按预期工作，并且由于我假设您希望 p 最多为 100% 宽，因此此类规则仍应满足您的要求。

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

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

max-width: 100%

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

您需要掌握 MathJax 才能准确了解发生这种情况的地点和原因，但我的猜测是在某些中间步骤中，某些  Text that is truncated due to <tt>inline-block</tt> and <tt>max-width</tt> Ensuing text Text that is not truncated thanks to <tt>inline</tt> and <tt>max-width</tt> Ensuing text  inline-block 的内容会得到 {{ 1}} 由其父内容间接设置或直接通过父 css 设置，此时子的 span 也有含义（当父没有宽度时，以百分比表示的 max-width 没有意义）。当排版进行时，这个子框需要增长，由于这个限制它不能增长。增长的需求可能来自正在下载的字体或其他东西，也可能因表达方式而异，因为某些表达方式的排版方式与其他表达方式不同。

我认为这里的教训是，您可以为 MathJax 输出的元素设置样式（通常是 max-width、max-width 等...），但在对它们进行样式限制时我会很小心属性 (font-size,color,height,width,min-height,min-width) 因为 MathJax 需要这种自由才能做好工作，如果如果您对 MathJax 排版过程没有大师级的了解，这种类型的样式也不太可能达到您想要的效果。