角球面上高度在Firefox

div的錯誤（？）這是推動我堅果...角球面上高度在Firefox

我使用下面的代碼，使文本內容區域一個div .textContent相同的高度最高的文字內容區域的其他divs。目標是擁有相同大小的包含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);

來源

2013-02-27 Geoff

看起來和我一樣在鉻和火狐 – Morpheus 2013-02-27 16:36:51

我只是不明白白ie中的空格，它在所有其他瀏覽器中都有。

我認爲這是用你的字體做的，因爲你正在加載一個字體，jquery在呈現字體之前就射擊了，因此它使用了大於typekit字體的回退字體（sans-serif）這意味着它最終渲染時會將空白留在底部。

爲了明白我的意思，如果您檢查您最大的div的元素並刪除標題的「聯盟哥特式」字體，您將會看到仍然適合該框的內容。

你需要延遲射擊jQuery，直到你的字體被渲染。嘗試使用：

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

來源

2013-02-27 16:48:45 Pete

你是一個天才皮特！謝謝你的幫助！ – Geoff 2013-02-28 09:36:56

角球面上高度在Firefox

回答

相關問題