html - 等高列仅适用于 Chrome

Question

我有 3 个高度相同的列。问题是它们似乎只能在 Google Chrome 上运行，至少在 Safari 或 FF 上不起作用。它们也不适用于 iPad 版 Chrome 或 Safari。

查看它们的实际应用 here

有趣的是，在这个 Fiddle example 我准备了完全相同的代码(只是更改了边框以获得更好的可视化效果)它们似乎适用于所有浏览器。

有办法解决这个问题吗？非常感谢!

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;
}

Answer 1

因为你使用absolute position 并且因为parent似乎没有relative位置，bottom:0;可以变成 html 的 bottom 或最近的具有 position 的父级，例如:relative、absolute 或 fixed .

此外，Firefox 不处理 table display 和 position : relative; 在一起。

因此，不幸的是，修复方法是将包装器(显示为表格)包装在可以接收的包装器中:position:relative; wich 将扩展 .wrapper 并为您提供底部区域坐标可达。

您的 fiddle 已更新:http://jsfiddle.net/AU5G3/1/

注意在 CSS 中删除左右坐标，它们是从主包装器而不是 col 区域计算的。