CSS 哪些浏览器支持 `overflow-y` 属性

在本文中，我们将介绍 CSS 中的 overflow-y 属性以及支持该属性的浏览器。

阅读更多：CSS 教程

什么是 `overflow-y` 属性？

overflow-y 属性用于控制元素在垂直方向上的溢出内容的处理方式。通过设置不同的值，我们可以决定在内容溢出时是否显示滚动条、隐藏溢出内容或者进行内容裁剪。

浏览器对 `overflow-y` 的支持

大多数现代浏览器都支持 overflow-y 属性，但在使用时仍需注意一些兼容性问题。

以下是一些知名浏览器对 overflow-y 属性的支持情况：

Google Chrome：从版本 1.0 起，Google Chrome 就完全支持 overflow-y 属性。
Mozilla Firefox：从版本 1.0 起，Mozilla Firefox 就完全支持 overflow-y 属性。
Microsoft Edge：从 EdgeHTML 13.0 的版本开始，Microsoft Edge 完全支持 overflow-y 属性。
Safari：从 Safari 3.0 的版本开始，Safari 完全支持 overflow-y 属性。
Opera：从 Opera 7.0 的版本起，Opera 完全支持 overflow-y 属性。

需要注意的是，虽然大多数现代浏览器都支持 overflow-y 属性，但旧版本的浏览器可能存在部分不兼容的情况。为了确保在各种浏览器上正确显示，建议使用最新版本的浏览器。

示例

以下是一个简单的示例，演示了如何使用 overflow-y 属性控制元素的垂直溢出内容：

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        width: 200px;
        height: 200px;
        overflow-y: scroll;
        border: 1px solid black;
    }

    .content {
        width: 100%;
        height: 400px;
    }
</style>
</head>
<body>

<div class="container">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae sagittis lacus. Ut fringilla maximus ex. Nulla facilisi.</p>
    </div>
</div>

</body>
</html>

在这个示例中，我们通过将 overflow-y 设置为 scroll，在 .container 元素垂直溢出内容时显示垂直滚动条。通过设置 .container 的宽度和高度，我们限制了 .content 的大小，使内容超出 .container 的高度。这样，当内容溢出时，只会垂直滚动显示。