css - 溢出-x : visible; overflow-y: auto; does not work - is this standards compliant?

标签 css firefox internet-explorer-9

我在开发网页时遇到问题。

Firefox 或 Internet Explorer 都不会呈现我对以下代码片段的预期行为:

<div
    style="overflow-x: visible; overflow-y: auto; width: 200px; height: 200px; border: 1px solid #F00;">
    <div style="width: 300px; height: 300px; background-color: #0F0;">&nbsp;</div>
</div>

我希望能够看到在容器 div 的 x 侧溢出的内容,而不是在底部溢出的内容(使用滚动条查看更多内容)。相反,我看到的是一个 x 滚动条和一个 y 滚动条。

注意:对 firebug 中计算的样式属性的检查表明 firefox 正在使用 overflow-x: auto; 作为容器。

这是预期的行为吗?我了解请求在我自己的内容之上放置滚动条存在一些歧义(例如,我的水平内容会超出垂直滚动条,因此必须覆盖部分内容)。

那么我遇到的行为是否符合标准?

最佳答案

好吧,我该死的,我决定检查一下 CSS(3) 规范对此的规定,it说:

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

所以,简而言之,是的,我所经历的完全是预期的行为。

来源:CSS basic box model W3C Working Draft 9 August 2007 (就在示例之后)

关于css - 溢出-x : visible; overflow-y: auto; does not work - is this standards compliant?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7898651/

相关文章:

javascript - IE9 等效于 querySelectorAll

html - IE9及更高版本中菜单中的白色方 block

css - 手机上的Bootstrap自动换行问题

javascript - 在CSS中开始滚动时如何重新创建Mac滚动条淡入和淡出

css - Mozilla中的ASP:DropDownList垂直文本对齐方式

css - 如何在输入字段上重新启用文本选择

css - 为什么在IE> = 9中使用border-radius:[value]固定的子元素被裁剪?

javascript - 文本字段与Mobiscroll错误显示

css - @media 没有执行 css 更改

javascript - 漂亮的日期JS在Firefox上不起作用