我有一个HTML结构，其中有几个列表项使用flexbox布局，其中有几个元素，我使用嵌套的flexbox进行布局。
在Chrome，IE11和Edge中，由于Flexbox和height: 100% ，所有列表项的高度都得到了有效匹配。 因此，提交按钮（“添加到购物篮”）垂直对齐。
但是在Safari（桌面，版本9.1.2）中， height: 100%未应用（可能没有看到父高度值来自）。 因此，盒子的高度不同，我的元素没有对齐。
如何修改CSS以使Safari与Chrome的渲染行为相匹配？
Codepen示例
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%;
}
<ul>
<li>
<figure>
<a href="#">
<img src="http://placehold.it/400" />
</a>
<figcaption>
<div class="itemname"><span class="price">$10</span>Product</div>
<form>
<select>
<option selected>Please select</option>
</select>
<button type="submit">Add to Basket</button>
</form>
</figcaption>
</figure>
</li>
<li>
<figure>
<a href="#">
<img src="http://placehold.it/400" />
</a>
<figcaption>
<div class="itemname"><span class="price">$10</span>Product Two With A Much Longer Name That Could Wrap</div>
<form>
<select>
<option selected>Please select</option>
</select>
<button type="submit">Add to Basket</button>
</form>
</figcaption>
</figure>
</li>
<li>
<figure>
<a href="#">
<img src="http://placehold.it/400" />
</a>
<figcaption>
<div class="itemname"><span class="price">$10</span>Product Three No Select</div>
<form>
<button type="submit">Add to Basket</button>
</form>
</figcaption>
</figure>
</li>
<li>
<figure>
<a href="#">
<img src="http://placehold.it/400" />
</a>
<figcaption>
<div class="itemname"><span class="price">$10</span>Product</div>
<form>
<select>
<option selected>Please select</option>
</select>
<button type="submit">Add to Basket</button>
</form>
</figcaption>
</figure>
</li>
</ul>
I have an HTML structure with several list items laid out using flexbox, and within them are several elements which I'm laying out using a nested flexbox.
In Chrome, IE11, and Edge, the heights of all the list items are effectively matched thanks to Flexbox and height: 100%. The submit buttons ("add to basket") are therefore vertically aligned.
In Safari (desktop, ver 9.1.2) however, the height: 100% isn't applying (it probably isn't seeing a parent height value to base from). As such, the boxes aren't of equal height, and my elements are not aligned.
How can I modify the CSS to have Safari match Chrome's rendering behaviour?
Codepen example
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%;
}
<ul>
<li>
<figure>
<a href="#">
<img src="http://placehold.it/400" />
</a>
<figcaption>
<div class="itemname"><span class="price">$10</span>Product</div>
<form>
<select>
<option selected>Please select</option>
</select>
<button type="submit">Add to Basket</button>
</form>
</figcaption>
</figure>
</li>
<li>
<figure>
<a href="#">
<img src="http://placehold.it/400" />
</a>
<figcaption>
<div class="itemname"><span class="price">$10</span>Product Two With A Much Longer Name That Could Wrap</div>
<form>
<select>
<option selected>Please select</option>
</select>
<button type="submit">Add to Basket</button>
</form>
</figcaption>
</figure>
</li>
<li>
<figure>
<a href="#">
<img src="http://placehold.it/400" />
</a>
<figcaption>
<div class="itemname"><span class="price">$10</span>Product Three No Select</div>
<form>
<button type="submit">Add to Basket</button>
</form>
</figcaption>
</figure>
</li>
<li>
<figure>
<a href="#">
<img src="http://placehold.it/400" />
</a>
<figcaption>
<div class="itemname"><span class="price">$10</span>Product</div>
<form>
<select>
<option selected>Please select</option>
</select>
<button type="submit">Add to Basket</button>
</form>
</figcaption>
</figure>
</li>
</ul>
最满意答案
通过一些编辑，这在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;
}
I've worked around the problem by reducing the amount of markup between the things I'm aligning within the structure, and the outer container -
Basically eliminating the figure and figcaption so that the elements needing to be vertically aligned are siblings, and there are no wrappers in between to confuse Flexbox's height matching calculation.
Working code demo
更多推荐
发布评论