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。