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

我想制作一个模拟\itemize乳胶环境（即标记应该像“1”，2）等等的数学公式的列表的HTML文档）和我想有一个两列布局。使用`position`时，Mathjax字体大小会缩小CSS属性

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

任何两个这三种机制似乎工作正常，但是当我混合他们三个它不：数学公式的字体大小（回忆，用MathJax呈现）太小了。

下面是一个最小的代码来重现问题（在Ubuntu测试16.04 LTS与Firefox 49.0.2）

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

如片断除去position: relative;在ol > li在CSS指示修复MathJax大小问题。可悲的是，它也打破了标记技巧（标记disapear）

任何想法如何使这项工作？

来源

2016-11-17 Cédric Van Rompay

这看起来像一个影响FF和边缘（Chrome和Safari看起来很好）的bug。我在https://github.com/mathjax/MathJax/issues/1664上提交了一个bug。其他产出没有这个问题。 –

未来的注意事项：cdn.mathjax.org即将报废，请查看https://www.mathjax.org/cdn-shutting-down/获取迁移提示。 –

MathJax使用相对较高的方框（60x高）来确定周围字体的高度，而FF和Edge看起来好像在多列设置中对该框的大小做了一些有趣的事情。它们似乎覆盖了MathJax为此框设置的宽度和高度，因此MathJax得到错误的前高度（并因此设置了错误的字体缩放）。既然FF和IE都这样做了，也许这是HTML或CSS规范的正确行为，而WebKit就是错误的。我没有试图弄清楚。

无论如何，事实证明，在MathJax中使用的测试元素的CSS中添加overflow:hidden可以解决问题（浏览器在这种情况下不会因为原因而超出我的理解范围而拧高）

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

到您的网页，或添加

你的CSS文件应该解决的问题。

来源

2016-11-20 23:54:02

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

回答

相关问题