CSS 溢出-x:可见；和溢出-y:隐藏；导致滚动条问题

问题描述

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

ul{空白:nowrap；溢出-x:可见；溢出-y:隐藏；/* 添加宽度以便它可以在代码段中工作 */宽度:100px；}李{显示:内联块；}

<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>

当你看到这个的时候.

在底部有一个滚动条，即使我已经为溢出 x/y 指定了可见和隐藏的值.

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

我猜一定有一些 w3c 规范或某些东西告诉这会发生，但对于我的生活，我无法弄清楚原因.

JSFiddle

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

解决方案

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

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

在 Gecko、Safari、Opera 中，可见"当与隐藏"(换句话说:可见"与任何其他不同的东西'可见的').壁虎 1.8、Safari 3、Opera9.5 之间相当一致.

还有 W3C 规范 说:

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

简短版本:

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

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>

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.

(observed on Chrome 11 and opera (?))

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:- 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

also the W3C spec says:

Short Version:

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:隐藏；导致滚动条问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！