Question

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

这是在safari中呈现的方式：

enter image description here

我找到的唯一解决方法是使用max-height属性设置子元素。

代码：

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>

预期的结果是尊重设置max-height的父级的所有子元素：

enter image description here

Answer 1

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

enter image description here

它似乎只是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

我发现在Safari for Windows中完美运行但没有指定任何子元素高度值的最佳解决方案是设置属性max-height：inherit;

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

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

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

Answer 3

TL DR;

基本上将2行代码添加到现有的ode：

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 HERE

所有这些导致：

enter image description here

Windows上的Safari不会尊重父元素的max-height

3 个答案: