Question

编辑： 最新的Firefox版本中不再出现此问题！

所以我在 div中有一个表格，宽度为100％，最大宽度为800px ，我不想包装表的内容，所以我用：

white-space: nowrap;

问题是，我得到一个水平滚动条，即使内容不是800px。你们知道为什么吗？我想没有换行，也没有水平滚动到一定的宽度。

这只适用于Firefox，Chrome中的可以正常使用。

Jsfiddle显示问题。

Answer 1

这看起来是Firefox中的一个错误。（同样的问题出现在最新的夜间构建中，所以它会在这里停留一段时间。）并且它似乎不是解决方案，只是解决方法。

问题是，如果容器绝对定位，Gecko的程序如下：

绝对定位的容器只需要与其内容一样宽
因此，如果内容是，例如300px宽，然后容器也将是300px宽
如果内容高于容器，请添加垂直滚动条
但请勿调整容器的宽度以考虑此滚动条
所以现在内容比容器的视口宽。

示例：

＆＃13;

#definitionDiv {
  position: absolute;
  left: 20px;
  top: 20px;
  max-height: 150px;
  overflow: auto;
}
.data {
  width: 220px;
  height: 220px;
  border: 40px inset #CCB;
  background: #CCB;
}

＆＃13;

<div id="definitionDiv">
   <div id="definitionDivContent">
    <div class="data">
    </div>
  </div>
</div>

＆＃13;

那么好吧。可能的解决方法是：绝对不要放置#definitionDiv。或者，使用JavaScript计算内容的宽度，并相应地调整#definitionDiv。或者，设置一个你知道足够大的固定宽度。或者，overflow:visible。

到目前为止，我发现的最优雅的解决方案是通过赋予内容宽度与滚动条一样宽来调整内容的宽度。然后你不必弄清楚最宽桌子的最大宽度是多少。

＆＃13;

#definitionDiv {
  position: absolute;
  left: 20px;
  top: 20px;
  max-height: 150px;
  overflow: auto;
}
#definitionDiv > :first-child {
  margin-right: 25px;
}
.data {
  width: 220px;
  height: 220px;
  border: 40px inset #CCB;
  background: #CCB;
}

＆＃13;

<div id="definitionDiv">
  <div id="definitionDivContent">
    <div class="data">
    </div>
  </div>
</div>

＆＃13;

问题当然是其他浏览器会将滚动条放在比Firefox更右边的位置。我还没有能够找到解决方案。

CSS white-space：pre总是在firefox

1 个答案: