时间戳

首页 > 解决方案 > 由于溢出导致的填充底部：自动

html - 由于溢出导致的填充底部：自动

问题描述

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

但是，我有一个奇怪的行为。现有的 div 类似于以下代码段中的第一个。但是，当我添加 overflow:auto 时，会出现一个垂直滚动条（请参阅以下代码段中的第二个 div）。通过查看细节，我了解到，这是由于 MathJax 类引起的对齐造成的。

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

谁能帮我理解为什么溢出自动强制为 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>

标签： htmlcss

解决方案

正如我评论的那样，插件动态添加了很多代码，很难识别问题。这显然是所有嵌套中的一个造成的溢出问题，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-heightofp以避免溢出。对于这种特殊情况，它仍然是一个近似解决方案。它可能在其他情况下不起作用：

.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>

推荐阅读