Question

我正在尝试将MathJax内容放入带有CSS'overflow：auto'的div中，以便div将显示水平滚动条以显示长数学表达式。

但是，我的行为很奇怪。现有的div类似于以下代码段中的第一个。但是，当我添加overflow：auto时，会出现一个垂直滚动条（请参见以下代码段中的第二个div）。通过研究细节，我知道这是由于MathJax类导致的对齐引起的。

请注意，更改box-sizing或vertical-align属性不能解决此问题。但是，如果我在div上添加了一个padding-bottom，或者如果我将overflow-y：hidden设置了，则可以解决。但是我不确定这是否是正确的方法。

谁能帮助我确切地理解为什么overflow-auto会迫使div的填充底部，为什么它不包含在div的高度中以强制显示垂直滚动条以及解决的最佳方法是什么它。谢谢

.margin-botom-zero {
  margin-bottom: 0;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.overflow-auto {
  overflow-x: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax:{inlineMath: [['$','$']]} });
</script>

<div class="red">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{2}$</p>
</div>

<br>

<div class="red overflow-auto">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{2}$</p>
</div>

Answer 1

正如我评论的那样，该插件动态添加了许多代码，很难识别出问题所在。显然，这是由所有嵌套span中的一个人造成的溢出问题，而且某种程度上是随机的。

例如，如果将数字替换为字母，则不会出现问题：

.margin-botom-zero {
  margin-bottom: 0;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.overflow-auto {
  overflow-x: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax:{inlineMath: [['$','$']]} });
</script>

<div class="red">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{2}$</p>
</div>

<br>

<div class="red overflow-auto">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{j}$</p>
</div>

<div class="red overflow-auto">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{9}$</p>
</div>

解决方法是增加line-height中的p以避免溢出。对于这种特殊情况，它仍然是一种近似解决方案。在其他情况下可能无法使用：

.margin-botom-zero {
  margin-bottom: 0;
  line-height: 2.7em;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.overflow-auto {
  overflow-x: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax:{inlineMath: [['$','$']]} });
</script>

<div class="red">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{2}$</p>
</div>

<div class="red overflow-auto">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{j}$</p>
</div>

<div class="red overflow-auto">
  <p>this is test</p>
  <p class="blue margin-botom-zero">$\dfrac{1}{9}$</p>
</div>

由于溢出造成的填充底部：自动

1 个答案: