jquery - Firefox 中的等高 div 错误(？)

Question

这让我发疯了......

我使用下面的代码使一个 div 的文本内容区域 .textContent 与其他 div 的最高文本内容区域具有相同的高度。目标是让包含 div 的大小相等 .contentBlockShorter 所有图片都显示在底部，如果你 visit the page 这会更有意义.这是白色的方 block ，第一个的标题是“建立你的军队”。在 Chrome 和 ie9 上，一切都是 tickety-boo，但在 FF 和 ie8 上，文本和图像之间存在差距 - 我根本无法弄清楚为什么!任何人都可以看到可能发生的事情吗？谢谢

CSS

.contentBlockShorter {
    background-color: #fff;
    padding: 1.5em;
    margin: 0 1% 2em 1%;
    float: left;
    width: 31%;
    min-width: 15em;
}   
.textContent {
    display: block;
    margin: 0;
    padding:0;
}
.contentBlockShorter img {
    width: 100%;
    margin: 0;
    height: auto;
    float: none;
    padding: 0;
}

html

<div class="contentBlock contentBlockShorter">
    <div class="textContent">
        <h3>Build your army</h3>
        <h4><a href="#">battle packs and special sets to boost your army</a></h4>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div><!-- /textContent --> 
    <img src="img/horrible-histories-toys-roman-and-egyptian-battle-packs.jpg" alt="Horrible Histories Toys Battle Packs" />
    <br class="clear">
</div><!-- /contentBlock -->

Javascript

var maxHeight = 0;
$(".textContent").each(function(){
    if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".textContent").height(maxHeight);

Answer 1

我只是没有在 ie 中得到空白，它在所有其他浏览器中都存在。

我认为这与您加载字体时的字体有关，jquery 在呈现字体之前触发，因此它使用的是比 typekit 字体大的后备字体(sans-serif)意思当它最终被渲染时，它会在底部留下空白。

为了理解我的意思，如果您检查最大的 div 的元素并删除标题的“league-gothic”字体，您会发现剩下的内容完全适合该框。

您需要延迟触发 jquery，直到呈现您的字体。尝试使用:

$(window).load(function() {
    // javascript code here
});