javascript - MathJax 库在公式中留下滚动条

Question

我一直在尝试使用 MathJax 创建一些数学工具以用于我的 A-Levels，我目前正在制作一个二次方程页面和一个用于二次方程根的小型计算器。

当我尝试使用 MathJax 显示公式时出现问题，正如您在此处看到的那样 ( http://www.lucapassariello.co.uk/mathsTools/quadratics )，显示的内容是一堆滚动图标，并且当正确的公式确实显示很短的时间时，一切似乎都被提升为虚无的力量。

下面是用于库和配置脚本的链接。

    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
      });
    </script>
    <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>

这里是二次公式的实现 HTML。

<p>$$x=\frac{-b \pm \sqrt{b^2 -4ac}}{2a}$$</p>

非常感谢任何帮助。

Answer 1

您提供的代码按预期工作，因此我认为它必须与您的网站有关。

如果您从 resources/public/css/style.css 文件中的以下代码中删除 overflow-x:hidden;，则你将会恢复工作。它似乎与 Mathjax css 冲突并切断了从脚本渲染的元素。

如果您仍然需要 overflow-x:hidden 那么我建议您更有选择性地使用它，而不是使用 *

*{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}