Mathjax - 在 div 中使用 display:none 处理数学答案

【问题标题】：Mathjax - processing mathematics in div with display:noneMathjax - 在 div 中使用 display:none 处理数学
【发布时间】：2021-08-10 13:42:34
【问题描述】：

Mathjax 如果内容位于带有 display:none 的容器中，则在单独的位置排版数学，因为浏览器不计算子元素的大小。这会导致问题，尤其是元素的宽度。 This is explained in detail here

为避免这种情况，建议使用 position: absolute; top: 0, left:0; width:0, height:0, overflow: hidden; visibility: hidden; 之类的 CSS，而不是 display:none

我没有太多的编码经验。我的疑问是，我们不能只使用position: absolute;width:0, visibility: hidden; 吗？根据我的测试，这本身很好。为什么要添加像 top: 0, left:0; height:0,overflow: hidden; 这样的 CSS，尽管它可以进一步确保内容被隐藏？任何人都可以帮助理解吗？我知道每个属性会做什么，但认为这里根本没有必要。

【问题讨论】：

标签： css mathjax

【解决方案1】：

根据您的问题可见性：隐藏是隐藏元素，但它仍然覆盖了您定义的容器的所有空间。这就是为什么你需要使用 width :0 height: 0 并且你必须使用 overflow hidden 只是因为 div 内容不会被溢出

【讨论】：

我提到了为什么宽度：0，可见性：隐藏；是不足够的？ width 0 可以确保它不占用任何空间并且可能不需要其他属性
因为可见性隐藏只会隐藏元素..不会删除捕获的地方