我有 3 列延伸到相等的高度。问题是它们似乎只能在 Google Chrome 上运行，至少不能在 Safari 或 FF 上运行。它们也不适用于 iPad 版 Chrome 或 Safari。
在这里看到他们的行动
有趣的是，在这个Fiddle 示例中，我准备了完全相同的代码（仅更改了边框以获得更好的可视化效果），它们似乎适用于每个浏览器。
有没有办法解决这个问题？非常感谢！
HTML
<div id="wrapper">
<div class="col">
<div class="content"> <img src="http://www.gayot.com/blog/wp-content/uploads/2010/02/crystals-300x160.jpg">
<h3>Classics - Rnb - Reggae - Rare Groove - Revival</h3>
<!-- CUSTOM LIST -->
<div class="custom-list info-box-inner-list">
<ul>
<li>Tuesday 31st December 2013</li>
<li>The 4* Holiday Inn Hotel</li>
<li>London WC1N 1HT,</li>
<li>pop, dance, disco, electronic</li>
</ul>
</div>
<!-- END CUSTOM LIST -->
<p>Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.LAST WORD</p>
<div class="btn-align-bottom"> <a href="#" class="button moreinfo">More Info...</a> </div>
</div>
</div>
<div class="col">
<div class="content"> <img src="http://www.gayot.com/blog/wp-content/uploads/2010/02/crystals-300x160.jpg">
<h3>Classics - Rnb - Reggae - Rare Groove - Revival</h3>
<!-- CUSTOM LIST -->
<div class="custom-list info-box-inner-list">
<ul>
<li>Tuesday 31st December 2013</li>
<li>The 4* Holiday Inn Hotel</li>
<li>London WC1N 1HT,</li>
<li>pop, dance, disco, electronic</li>
</ul>
</div>
<!-- END CUSTOM LIST -->
<p>Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque..Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque..</p>
<div class="btn-align-bottom"> <a href="#" class="button moreinfo">More Info...</a> </div>
</div>
</div>
<div class="col">
<div class="content"> <img src="http://www.gayot.com/blog/wp-content/uploads/2010/02/crystals-300x160.jpg">
<h3>Classics - Rnb - Reggae - Rare Groove - Revival</h3>
<!-- CUSTOM LIST -->
<div class="custom-list info-box-inner-list">
<ul>
<li>Tuesday 31st December 2013</li>
<li>The 4* Holiday Inn Hotel</li>
<li>London WC1N 1HT,</li>
<li>pop, dance, disco, electronic</li>
</ul>
</div>
<!-- END CUSTOM LIST -->
<p>Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.</p>
<div class="btn-align-bottom"> <a href="#" class="button moreinfo">More Info...</a> </div>
</div>
</div>
</div>
CSS
.content > img {
vertical-align:top;
}
#wrapper {
height: 100%;
width: 100%;
margin: 20px auto;
display:table;
overflow: hidden;
}
#wrapper > .col {
display: table-cell;
width: 30.3%;
margin: 0 15px 3px;
background-color: #fff;
text-align: center;
position: relative;
height: 100%;
padding-bottom: 2px;
border:1px solid #000;
}
#wrapper > .col > .content {
padding:0 0 35px;
height:100%;
}
.content {
margin-bottom:30px;
position: relative;
}
.content > p {
vertical-align:top;
}
.content h3 {
font-size:1.375rem;
font-weight:400;
text-align:center;
margin-bottom: 20px;
padding: 25px 27px 0;
}
.content p {
text-align:left;
padding: 0 27px 30px;
}
.button.moreinfo {
margin-top: 5px;
margin-bottom: 0;
padding-top: 0.5rem;
padding-right: 0.3rem;
padding-bottom: 0.5rem;
padding-left: 0.3rem;
background-color: #2a2a2a;
font-size: 0.9rem;
color: #f39c12;
font-weight: 400 !important;
}
div.btn-align-bottom {
position:absolute;
bottom:50px;
left:0;
right:0;
}
.info-box {
margin-bottom:0;
margin-top: 15px;
}
.info-box img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
.info-box-inner {
background: #FFF;
padding:25px 27px 35px;
display:inline-block;
overflow:hidden;
float:none;
min-height:270px;
text-align:center;
-moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
-webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
z-index:1;
}
.info-box-inner p {
text-align:left;
}
.info-box-inner h3 {
font-size:1.375rem;
font-weight:400;
text-align:center;
}