0

我想制作一个 HTML 文档，其中包含一个模拟\itemize乳胶环境的数学公式列表（即标记应该像“1）、2）等”）并且我想要一个两列布局。

对于数学公式，我使用 MathJax，对于标记，我在https://stackoverflow.com/a/1636635/3025740使用 CSS 技巧，对于两列，我使用 CSS 属性column-count添加特定于供应商的属性，如http:// www.w3schools.com/cssref/css3_pr_column-count.asp

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

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

<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>

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

知道如何进行这项工作吗？

4

1 回答 1

2

MathJax 使用一个相对较高的框（60ex 高）来确定周围字体的前高度，看起来 FF 和 Edge 在您的多列设置中对该框的大小做了一些有趣的事情。它们似乎覆盖了 MathJax 为此框设置的宽度和高度，因此 MathJax 得到了错误的前高度（因此设置了错误的字体缩放比例）。由于 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 文件应该可以解决问题。

于 2016-11-20T23:54:02.600 回答