css - css 中的属性 'overflow-y' 未显示预期行为

Question

在我的元素中，我创建了以下 DIV 部分来模拟弹出框:

<div id="box">
    <div id="header"> <span id="title"></span> <span id="button">X</span> </div>
    <div id="text"> </div>
</div>

我在上面附加了几页的内容，大多数内容大于框的大小。在此当前状态下，内容呈现在框外，尽管我对属性 overflow-x 使用值“滚动”，如下所示:

#box {
    border-style: solid;
    box-shadow: 2px 2px 2px black;
    height: 400px;
    max-width: 90%;
    max-height: 90%;
}

#button {
    background-color: #99CCFF;
    min-width: 32px;
    max-width: 5%;
    min-height: 32px;
    max-height: 100%;
    position:absolute;
    right:0px;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
}

#header {
    background-color: #66B2FF; 
}

#title {
    text-decoration-color: #FFFFFF;
    font: 28px arial;
}

#text {
    background-color: #E0E0E0;
    text-decoration-color: #000000;
    font: 24px sans-serif;
    overflow-y: scroll;
    min-height: 480px
}

.ui-resizable-handle {
    width: 5px;
    height: 5px;
    background-color: red;
}

我在这里错过了什么？

Answer 1

如果我没记错的话

overflow-x: scroll;
overflow-y: scroll;

是 css 3 属性，如果您使用的是旧浏览器，它们将无法工作。

您的代码在 chrome33 中运行良好，这里是 fiddle