css - 为什么不溢出-y :visible look the same as overflow:visible

Question

这是我的菜单模型

HTML

Menu 1 (overflow:hidden)
<div class='menu'>
  <ul>
    <li>
      Item 1
      <ul>
        <li>submenu 1</li>
        <li>submenu 2</li>
        <li>submenu 3</li>
        <li>submenu 4</li>
        <li>submenu 5</li>
      </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>
<br/><br/>
Menu 2 (overflow:hidden; overflow-y visible)
<div class='menu menu2'>
  <ul>
    <li>
      Item 1
      <ul>
        <li>submenu 1</li>
        <li>submenu 2</li>
        <li>submenu 3</li>
        <li>submenu 4</li>
        <li>submenu 5</li>
      </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>
<br/><br/>
Menu 3 (overflow-x:hidden;)
<div class='menu3'>
  <ul>
    <li>
      Item 1
      <ul>
        <li>submenu 1</li>
        <li>submenu 2</li>
        <li>submenu 3</li>
        <li>submenu 4</li>
        <li>submenu 5</li>
      </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>
<br/><br/>
Menu 4 (overflow:visible;)
<div class='menu menu4'>
  <ul>
    <li>
      Item 1
      <ul>
        <li>submenu 1</li>
        <li>submenu 2</li>
        <li>submenu 3</li>
        <li>submenu 4</li>
        <li>submenu 5</li>
      </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

CSS

.menu            {border:1px solid #000000; overflow:hidden;}
.menu ul         {list-style:none; margin:5px 5px; padding:0; position:relative}
.menu li         {display:inline-block}
.menu li::after  {content: " | ";}
.menu ul ul      {position:absolute}
.menu ul ul li   {display:block;}
.menu2           {overflow-y:visible}
.menu4           {overflow:visible}

.menu3           {border:1px solid #FF0000;overflow-x:hidden}
.menu3 ul         {list-style:none; margin:5px 5px; padding:0; position:relative}
.menu3 li         {display:inline-block}
.menu3 li::after  {content: " | ";}
.menu3 ul ul      {position:absolute}
.menu3 ul ul li   {display:block;}

Fiddle

现在的想法是，菜单项 1 有一个子菜单，该子菜单通过 javascript 触发显示，子菜单应该位于框外。因为这个菜单应该是响应式的，所以我假设模板中设置了 overflow 是有原因的，我想尽可能避免改变模板。

现在您可以通过代码看到 Menu 1 中的子菜单隐藏在框中，当我去覆盖 中的 overflow-y 属性时菜单 2 是 default value (与 overflow's 相同)它仍然隐藏并且有一个滚动框。

现在以防万一 overflow 中有什么奇怪的东西仍然设置为 y 轴我去复制 menu 类 Menu 3 而不是 overflow:hidden 我只是做了 overflow-x:hidden; 但它仍然是一个滚动条。 Menu 4 展示了如果 overflow 设置为可见(默认值)我没有滚动条并且我的子菜单按原样显示。

我的问题是为什么 overflow-y:visible 看起来和 overflow:visible 不一样？据我了解，overflow:visible 只是 overflow-x:visible; overflow-y:visible 很像border:1px solid #000000 一样，一个一个设置所有边框边的宽度，样式和颜色

Answer 1

overflow-x 和 overflow-y 是 CSS3 的一部分(而普通 overflow 是 CSS2)，并且仍处于试验阶段。当一个值是“滚动值”(包括 hidden)而另一个值是 visible 时发生的事情的规则很复杂，坦率地说令人困惑。

来自CSS3 Overflow Spec :

2. ... if one cascaded values [sic] is one of the scrolling values and the other is ‘visible’, then computed values are the cascaded values with ‘visible’ changed to ‘hidden’.

这似乎证明了您所看到的行为是合理的，但我不明白为什么要这样设计。