问题描述
内联数学有时与后面的文本重叠。我想我已经能够查明问题的确切根源,这是样式表中的一行,但我不明白发生了什么以及我应该如何解决它。
这是我的 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 才能准确了解发生这种情况的地点和原因,但我的猜测是在某些中间步骤中,某些 <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>
inline-block
的内容会得到 {{ 1}} 由其父内容间接设置或直接通过父 css 设置,此时子的 span
也有含义(当父没有宽度时,以百分比表示的 max-width
没有意义)。当排版进行时,这个子框需要增长,由于这个限制它不能增长。增长的需求可能来自正在下载的字体或其他东西,也可能因表达方式而异,因为某些表达方式的排版方式与其他表达方式不同。
我认为这里的教训是,您可以为 MathJax 输出的元素设置样式(通常是 max-width
、max-width
等...),但在对它们进行样式限制时我会很小心属性 (font-size
,color
,height
,width
,min-height
,min-width
) 因为 MathJax 需要这种自由才能做好工作,如果如果您对 MathJax 排版过程没有大师级的了解,这种类型的样式也不太可能达到您想要的效果。