CSS溢出-x:可见；和溢出-y:隐藏；导致滚动条问题 [英] CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

问题描述

假设你有一些样式和标记:

Suppose you have some style and the markup:

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 指定了可见和隐藏值.

When you view this. The <ul> has a scroll bar at the bottom even though I've specified visible and hidden values for overflow x/y.

(在 Chrome 11 和 Opera (?) 上观察到)

(observed on Chrome 11 and opera (?))

我猜肯定有一些 w3c 规范或某些东西告诉这种情况发生，但对于我的生活，我无法弄清楚为什么.

I'm guessing there must be some w3c spec or something telling this to happen but for the life of me I can't work out why.

JSFiddle

更新:-我找到了一种方法来通过添加另一个包裹在 ul 周围的元素来获得相同的结果.看看吧.

UPDATE:- I found a way to acheive the same result by adding another element wrapped around the ul. Check it out.

推荐答案

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

After some serious searching it seems i've found the answer to my question:

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

在 Gecko、Safari、Opera 中，可见"与隐藏"(换句话说:可见"结合使用时变为自动"其他任何不同的东西'可见的').Gecko 1.8、Safari 3、Opera9.5 之间非常一致.

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 规范 也说:

‘overflow-x’的计算值和'overflow-y'和他们的一样指定的值，除了一些与可见"的组合不是可能的:如果一个被指定为可见"，另一个是滚动"或自动"，然后可见"设置为'汽车'.的计算值溢出"等于计算的如果溢出-y"，则溢出-x"的值是一样的；否则就是一对'overflow-x' 的计算值和‘溢出-y’.

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.

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.

这篇关于CSS溢出-x:可见；和溢出-y:隐藏；导致滚动条问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！