Question

我想创建一个HTML文档，其中包含一个模拟\itemize乳胶环境的数学公式列表（即标记应该像“1），2）等”，我希望有两个 - 列布局。

对于数学公式，我使用MathJax，对于我在wolframalpha使用CSS技巧的标记，对于两列我使用CSS属性column-count添加特定于供应商的属性，如{{3} }

这三种机制中的任何两种似乎都可以正常工作，但是当我混合其中三种机制时它不会：数学公式的字体大小（召回，使用MathJax渲染）太小了。

这是重现问题的最小代码（在使用Firefox 49.0.2的Ubuntu 16.04 LTS上测试）

<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" async
		  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
		</script>
		<style media="screen">
			ol {
				counter-reset: list;
			}
			ol > li {
				list-style: none;
				/*removing this property fixes MathJax size but breaks markers*/
				position: relative;
			}
			ol > li:before {
				counter-increment: list;
				content: counter(list, decimal) ") ";
				position: absolute;
				left: -1.4em;
			}
			.twocolumns {
		    -webkit-column-count: 2;
		    -moz-column-count: 2;
		    column-count: 2;
			}
		</style>
	</head>
	<body>
		<div class="twocolumns">
			<ol>
				<li>\(2 \times 5\)</li>
				<li>\(4 \times (2 +11)\)</li>
				<li>\(4 \times 5 - 2 \times 7\)</li>
				<li>\(4 \times (87 - 45) + 5 \times 2\)</li>
			</ol>
		</div>
	</body>
</html>

正如CSS中position: relative;中的ol > li代码段中所示，修复了MathJax大小问题。可悲的是，它也打破了标记技巧（标记消失）

知道如何使这项工作吗？

Answer 1

MathJax使用一个相对较高的盒子（60ex高）来确定周围字体的ex高度，看起来FF和Edge都在你的多列设置中做了一些有趣的东西。它们似乎覆盖了MathJax为此框设置的宽度和高度，因此MathJax得到了错误的ex-height（因此设置了错误的字体缩放）。既然FF和IE都这样做，也许它是HTML或CSS规范的正确行为，并且WebKit弄错了。我没想弄明白。

在任何情况下，事实证明，将overflow:hidden添加到MathJax使用的测试元素的CSS可以解决问题（在这种情况下，浏览器不会搞砸高度，原因超出我的理解范围），所以添加

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  CommonHTML: {
    styles: {".mjx-ex-box-test": {overflow: "hidden"}}
  }
});
</script>

到您的信息页，或添加

.mjx-ex-box-test {
  overflow: hidden;
}

到您的CSS文件应解决问题。

使用`position` CSS属性时，Mathjax字体大小会缩小

1 个答案: