html - CSS 溢出-x : visible; and overflow-y: hidden; causing scrollbar issue

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 规范或其他东西告诉我会发生这种情况，但对于我的生活我无法弄清楚为什么。

JSFiddle

更新:- 我找到了一种通过在 ul 周围添加另一个元素来实现相同结果的方法。 . Check it out.

Answer 1

经过一番认真的搜索，我似乎找到了问题的答案:

来自:http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.

还有 W3C spec说:

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

简短版本:

如果您将 visible 用于 overflow-x 或 overflow-y 以及 visible 以外的其他内容另一方面，visible 值被解释为 auto。