gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:06:24 25 4
gpt4 key购买 nike

我想制作一个 HTML 文档,其中包含模仿 \itemize latex 环境的数学公式列表(即标记应类似于“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>

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

知道如何让它发挥作用吗?

最佳答案

MathJax 使用一个相对较高的框(60ex 高)来确定周围字体的 ex 高度,看起来 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 文件应该可以解决问题。

关于css - 使用 `position` CSS 属性播放时 Mathjax 字体大小会缩小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40657422/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com