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

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