带有html背景和字体颜色问题的MathJax
问题描述:
当使用html背景和字体颜色时,以下html文件在显示模式下不显示LaTex
表达式(分数a/b)。另外,在内联模式下,使用背景和字体颜色时,分母会将较低的边缘切割一点(如下图所示)。感谢您为我们提供MathJax,因为它在我们工作的许多领域对我们有很大的帮助。带有html背景和字体颜色问题的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代码来解决它你样式表
.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可能真的很有帮助。
您的建议工作(谢谢)。我在上面的Html文件中的'
'标签中添加了你的css代码,里面有''。 – nam@nam还有其他方法可以做到这一点,并且可能会遇到许多CSS问题,为避免浪费时间,请考虑阅读教程。祝你好运。 – alex