windows 上的 Safari 不会尊重父元素的最大高度

Question

在 Safari 中，不假定父元素的最大高度限制高度。

这是它在 safari 中的呈现方式：

我发现的唯一解决方法是将子元素也设置为最大高度属性。

代码：

html {
  
  height: 100%;

}

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

.menu-ctn {

  border: 1px solid #ff6a00;

  max-height: 40px;

  height: 100%;

}

.menu-ctn ul {

  height: 100%;

  text-align: center;

  border: 1px solid #00ff21;

  max-height: inherit;    /* Safari only override */  <= Solution

}

.menu-ctn ul li {

  width: 24%;

  display: inline-block;

  vertical-align: middle;

  height: 100%;

  background-color: #0094ff;

  max-height: inherit;    /* Safari only override */  <= Solution
}

<body>
  <div class="menu-ctn">
    <ul>
      <li>X</li>
      <li>Y</li>
    </ul>
  </div>
</body>

预期的结果是设置了最大高度的父元素的所有子元素都得到尊重：

Answer 1

我在 Safari 7.1.3 和 Google Chrome 版本 41.0.2272.89 mac 上测试了它，两种浏览器都以相同的方式呈现它。

这似乎只是 windows 问题上的 Safari。尝试使用媒体查询覆盖属性，该媒体查询使用伪类从 Chrome 过滤 Safari 5+：

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* Safari only override */
  ::i-block-chrome, .menu-ctn ul {
    height: 25%;
  }
}

Answer 2

TL DR;

基本上将两行代码添加到您现有的代码中：

position: relative; 在 .menu-ctn

position: absolute; top: 0; bottom: 0; left: 0; right: 0; 在 .menu-ctn ul

完整示例：

HTML

<div class="menu-ctn">
    <ul>
        <li>X</li>
        <li>Y</li>
    </ul>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.menu-ctn {
    border: 1px solid #ff6a00;
    height: 100%; max-height: 40px;
    position: relative;
}

.menu-ctn ul {
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    border: 1px solid #00ff21;
}

.menu-ctn ul li {
    width: 24%;
    height: 100%;
    display: inline-block;
    background-color: #0094ff;
}

LINK 举个例子

这里也是 link 到 fiddle：LINK HERE

所有这些导致：

Answer 3

我发现在 Safari 中完美运行 Windows 的最佳解决方案是设置属性 max-height: inherit;

.menu-ctn ul {
    max-height: inherit;    /* Safari only override */
}

.menu-ctn ul li {
    max-height: inherit;    /* Safari only override */
}

重要说明：必须将属性添加到所有后代，直到我们要用高度指定的一个元素。

windows 上的 Safari 不会尊重父元素的最大高度

Safari on windows won't respect parent's element max-height

html

css

safari