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

Question

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

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。一探究竟。

Answer 1

在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。