1

これは私を夢中にさせています...

以下のコードを使用して.textContent、div のテキスト コンテンツ領域を他の 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

つまり、他のすべてのブラウザには空白があります。

フォントを読み込んでいるときにフォントに関係していると思います。フォントがレンダリングされる前にjqueryが起動しているため、最終的にタイプキットフォントの意味よりも大きいフォールバックフォント（サンセリフ）を使用していますレンダリングされると、下部に空白が残ります。

つまり、最大の div の要素を調べて、見出しの「リーグ ゴシック」フォントを削除すると、残っているものがボックスに完全に収まることがわかります。

フォントがレンダリングされるまで、jquery の起動を遅らせる必要があります。使用してみてください:

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