CSS overflow-x：visible;和overflow-y：hidden;导致滚动条问题

问题描述

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

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.

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：

还有说：

简短版本：

如果您使用可见 $ 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;导致滚动条问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！