使用`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屬性

回答

相關問題