CSS 中溢出-y 的替代方案？答案

【问题标题】：Alternative to overflow-y in CSS?CSS 中溢出-y 的替代方案？
【发布时间】：2011-01-06 19:42:32
【问题描述】：

我正在创建一个日历，需要复制我会得到的行为

overflow-x:visible;
overflow-y:hidden;

适用于不支持这些 css 属性的浏览器。有什么我可以做的解决方法吗？我不只是想妥协并为那些浏览器添加溢出：隐藏，因为客户端真的想要这个功能。有人有什么好主意吗？

非常感谢。

【问题讨论】：

Internet Explorer 6.x+、Firefox 1.5+、Safari、Chrome 和 Opera 9.5+ 支持它们。是否还有其他广泛使用的浏览器不支持它们？
不，他们没有（至少上面的组合没有）。以brunildo.org/test/Overflowxy2.html 为例。
可以截图吗？没有上下文很难理解你的限制。我会在日历下放一个白色 div，z-index 很高，但如果有内容会受到这个“屏蔽”div 的影响，那么我的观点就没有实际意义了。
看看 www.queensfestival.co.uk/ed。我真正想要的是在左侧日历中滚动的漂亮javascript。

标签： css overflow hidden visible

【解决方案1】：

有人问了大致相同的问题（溢出-x 可见，-y 隐藏）。
http://forums.devnetwork.net/viewtopic.php?f=68&t=116457

一个名叫 Weirdan 的人说I'd say there's isn't any expected behavior because such style is unavoidably internally inconsistent，并举了一个例子，其中不清楚（Weirdan 说）东南部的区域应该隐藏还是显示。

他/她也说the effect you want is easily achieved by wrapping the outer div with another div and setting overflow-y on that div to hidden，并展示了这个例子（我希望我把它复制到这里可以吗？）。

<style type="text/css">
#outer-wrapper {
    overflow-y:hidden;
}
#outer {
  width:100px;
  height:100px;
  background:red;
  border:solid red 1px;
  overflow:visible;
}
#inner {
  width:200px;
  height:200px;
  background:green;
}
</style>
<div id="outer-wrapper">
  <div id="outer">
    <div id="inner"></div>
  </div>
</div>

【讨论】：