Question

这让我疯了......

我正在使用下面的代码使div的文本内容区.textContent与其他div的最高文本内容区域的高度相同。目标是使用包含div .contentBlockShorter的相同大小的所有内容以及显示在底部的图像，如果您visit the page，这将更有意义。这是白色的街区，第一个标题是“建立你的军队”。在Chrome和ie9上，一切都是嘀嗒声，但在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

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

我认为在你加载字体时你的字体是这样的，jquery在渲染字体之前就会触发，因此它使用的是你的后备字体（sans-serif），它大于typekit字体含义当它最终被渲染时，它将在底部留下白色空间。

要明白我的意思，如果你检查最大的div的元素并删除标题的“联盟 - 哥特”字体，你会发现剩下的东西完全适合盒子。

您需要延迟触发jquery，直到渲染完字体。尝试使用：

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

在Firefox中等高高度divs错误（？）

1 个答案: