CSS溢出-x：可见; 和溢出-y：隐藏；导致滚动条问题

  • Z时代
  • 2024-01-10
  • 分类：问答

假设您有一些样式和标记：

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px;
}
li
{
  display: inline-block;
}
<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

当您查看此内容时。该<ul>有一个在底部的滚动条，即使我已经溢出X / Y指定的可见和隐藏价值。

（在Chrome 11和Opera（？）上观察到

我猜测一定有一些w3c规范或某些东西可以告诉我这种情况的发生，但是对我而言，我无法弄清楚为什么。

我找到了一种方法，可以通过添加另一个包裹在周围的元素来达到相同的结果ul。一探究竟。

回答：

在Gecko，Safari，Opera中，与“隐藏”组合使用时，“可见”也变为“自动”（换句话说：当与“可见”以外的任何其他内容组合时，“可见”变为“自动”）。其中的Gecko 1.8，Safari 3，Opera 9.5非常一致。

也是W3C规范说：

“ overflow-x”和“ overflow-y”的计算值与它们的指定值相同，除了一些与“visible”的组合是不可能的：如果将一个指定为“

visible”而另一个指定为“ scroll”或“自动”，然后将“可见”设置为“自动”。如果“ overflow-y”相同，则“overflow”的计算值等于“ overflow-x”的计算值；否则为“ overflow-x”和“ overflow-y”的一对计算值。

如果您使用visible或overflow-x或overflow-y而不visible使用另一个，则该visible值将解释为auto。

以上是 CSS溢出-x：可见; 和溢出-y：隐藏；导致滚动条问题 的全部内容， 来源链接： utcz.com/qa/427178.html

回到顶部