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

Question

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

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

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规范或什么东西在告诉我这种事情会发生，但对于我的生活来说，我想不出原因是什么。

JSFiddle

最新情况：-我找到了一种方法，通过添加包装在ul. 去看看。

Answer 1

又一次廉价的黑客攻击，看起来很管用：style="padding-bottom: 250px; margin-bottom: -250px;"在垂直溢出正在被截断的元素上，250表示下拉列表所需的像素数，等等。