MathJax 有 html 背景和字体颜色问题

MathJax with html background and font color issue

以下 html 文件在使用 html 背景和字体颜色时不会在显示模式下显示 LaTex 表达式(分数 a/b)。此外,在内联模式下,分母使用背景和字体颜色将下边缘切掉很多(如下图所示)。感谢您为我们提供 MathJax,因为它在我们工作的许多领域都对我们有很大帮助。

Html 文件

<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_HTMLorMML">
</script>
</head>
<body>
A \(\frac{a}{b}\) fraction in inline mode
<br/>
A\[\frac{a}{b}\] fraction in display mode
<br/>
A <span style='color:white;background:black'>\(\frac{a}{b}\)</span> fraction in inline mode with black background and white font
<br/>
A <span style='color:white;background:black'>\[\frac{a}{b}\]</span> fraction in display mode with black background and white font. This one is not displaying fraction.

</body>
</html>

同时显示在 IE 11 和 Chrome:

您可以通过将 <span style='color:white;background:black'> 更改为 <span class='inverted'> 并将此 CSS 代码添加到您的样式中来解决此问题 sheet

.inverted .math {
    color: white;
    background-color: black;
}

您可能还会发现 CSS Style Objects 有用。

编辑:

添加此 CSS 的一种方法是像这样更改 <head> 标签内的代码:

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>
  <style type="text/css">
    .inverted .math {
      color: white;
      background-color: black;
    }
  </style> 
</head>

我也强烈建议您学习 CSS 的基础知识(至少),w3schools tutorials 可能真的很有帮助。