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

Question

我想制作一个 HTML 文档，其中包含模仿 \itemize 乳胶环境的数学公式列表（即标记应类似于“1”、2）等），我会喜欢有两列布局。

对于数学公式，我使用 MathJax，对于标记，我在 and for two-columns I use the CSS property column-count adding vendor-specific properties as in http://www.w3schools.com/cssref/css3_pr_column-count.asp

处使用 CSS 技巧

这三种机制中的任何两种似乎都可以正常工作，但是当我将其中三种机制混合使用时却不行：数学公式的字体大小（召回，用 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>

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

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

Answer 1

MathJax 使用相对较高的框（60ex 高）来确定周围字体的 ex-height，看起来 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 文件应该可以解决问题。

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

Mathjax font size shrinks when playing with `position` CSS attribute

css

html-lists

mathjax

column-count