CSS overflow-x：visible;和overflow-y：hidden;导致滚动条问题 [英] 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和歌剧（？）上观察）

(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

UPDATE： - 我发现了一种方法，通过添加包围 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:

from： http://www.brunildo.org/test/Overflowxy2.html

在Gecko ，Safari，Opera，'visible'
在与
'hidden'（换句话说：'visible'
结合
任何不同于
'visible'）。

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'的计算值与它们的
指定值相同，除了一些带有'visible'的
组合不是
可能：如果一个被指定为
'visible'，另一个是'scroll'或
'auto'，那么'visible'被设置为
'auto'。如果overflow-y
是相同的，则
'overflow'的计算值等于计算出的overflow-x的
值;否则为'overflow-x'和
'overflow-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’.

简短版本：

如果您使用可见 $ c> overflow-x 或 overflow-y 和可见其他。 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 overflow-x：visible;和overflow-y：hidden;导致滚动条问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！