Question

我有一个HTML结构，其中有几个列表项使用flexbox布局，其中有几个元素，我使用嵌套的flexbox进行布局。

在Chrome，IE11和Edge中，由于Flexbox和solarSystemName，所有列表项的高度都得到了有效匹配。因此，提交按钮（“添加到购物篮”）垂直对齐。

在Safari（桌面版，版本9.1.2）中，height: 100%未应用（可能没有看到父高度值来自）。因此，盒子的高度不同，我的元素没有对齐。

如何修改CSS以使Safari与Chrome的渲染行为相匹配？

height: 100%

body {
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
li {
  padding: 0 10px;
  flex: 1 1 25%;
}
figure {
  margin: 0;
  background-color: rgba(255, 0, 0, 0.25);
  height: 100%; // this isn't working in safari
  display: flex;
  flex-direction: column;
  a {
    flex: 1;
    flex-shrink: 0;
  }
  img {
    display: block;
    width: 100%;
  }
}
figcaption {
  height: 100%; // this isn't working in safari
  flex: 1;
  display: flex;
  flex-direction: column;
}
.itemname {
  flex: 1;
  flex-grow: 1;
  margin-bottom: 10px;
}
.price {
  float: right;
  font-weight: bold;
}
form {} select {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
button[type='submit'] {
  display: block;
  width: 100%;
}

Answer 1

通过一些编辑，现在在Safari 9上运行正常。

http://codepen.io/paulcredmond/pen/dpoqzQ

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

li {
  padding: 0 10px;
  display: flex;
  align-items: stretch;
  flex-direction: row; 
}

Answer 2

我通过减少我在结构中对齐的东西和外部容器之间的标记量来解决这个问题 -

基本上消除figure和figcaption，以便需要垂直对齐的元素是兄弟，并且中间没有包装来混淆Flexbox的高度匹配计算。

Working code demo

Safari不计算高度：嵌套Flexbox上的100％

2 个答案: