在Safari中，不假定父元素的max-height限制高度。
这是它在野生动物园中的呈现方式：
我发现的唯一解决方法是也使用max-height属性设置children元素。
码：
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的父级的所有子级元素：
最佳答案
我在Mac上的Safari 7.1.3和Google Chrome版本41.0.2272.89上进行了测试，两种浏览器都以相同的方式对其进行渲染。
它似乎只是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%;
}
}