1

这让我发疯...

我正在使用下面的代码使.textContentdiv 的文本内容区域与其他 div 的最高文本内容区域的高度相同。目标是包含大小相同的所有 div ，并在底部显示图像，如果您访问页面.contentBlockShorter，这将更有意义。这是白色块，第一个块的标题是“建立你的军队”。在 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);
4

1 回答 1

0

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

我认为这与您的字体有关，因为您正在加载字体，jquery 在字体渲染之前触发，因此它使用的是您的后备字体（无衬线），它大于 typekit 字体的含义。被渲染它会在底部留下空白。

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

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

$(window).load(function() {
    // javascript code here
});
于 2013-02-27T16:48:45.047 回答