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

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

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规范或某些东西可以告诉我这种情况的发生,但是对我而言,我无法弄清楚为什么。

我找到了一种方法,可以通过添加另一个包裹在周围的元素来达到相同的结果ul。一探究竟。

回答:

在Gecko,Safari,Opera中,与“隐藏”组合使用时,“可见”也变为“自动”(换句话说:当与“可见”以外的任何其他内容组合时,“可见”变为“自动”)。其中的Gecko 1.8,Safari 3,Opera 9.5非常一致。

也是W3C规范说:

“ overflow-x”和“ overflow-y”的计算值与它们的指定值相同,除了一些与“visible”的组合是不可能的:如果将一个指定为“

visible”而另一个指定为“ scroll”或“自动”,然后将“可见”设置为“自动”。如果“ overflow-y”相同,则“overflow”的计算值等于“ overflow-x”的计算值;否则为“ overflow-x”和“ overflow-y”的一对计算值。

如果您使用visibleoverflow-xoverflow-y而不visible使用另一个,则该visible值将解释为auto

以上是 CSS溢出-x:可见; 和溢出-y:隐藏;导致滚动条问题 的全部内容, 来源链接: utcz.com/qa/427178.html

回到顶部