2

私はクロムと奇妙な表示の不一致を持っています、そしておそらくクロスブラウザの経験を持つ誰かがそれに光を当てることができます。

フィドル： http： //jsfiddle.net/Bio2hazard/DqCMY/

問題を掘り下げるために、コードを可能な限り単純化しました。

HTML（ほんの数枚の画像、本当に）

<div id="1" class="list_box">
    <img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
    width="184" height="69"/>
</div>
<div id="2" class="list_box">
    <img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
    width="184" height="69"/>
</div>
<div id="3" class="list_box">
    <img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
    width="184" height="69"/>
</div>
<div id="4" class="list_box">
    <img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
    width="184" height="69"/>
</div>
<div id="5" class="list_box">
    <img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
    width="184" height="69"/>
</div>
<div id="6" class="list_box">
    <img class="game_image" src="http://lorempixel.com/output/animals-q-c-184-69-9.jpg"
    width="184" height="69"/>
</div>

CSS

body {
    background-color: #2d2d2b;
    color: #939393;
}

.list_box {
    margin-bottom: 2em;
    display:inline-block;
    width: 184px;
    height: 69px;
    overflow: hidden;
}

.testleft {
    float: left;   
}

.testright {
    float: right;   
}

JS（おそらく興味深い部分）

$.fn.infoCardDisable = function () {
    $('.active').stop().animate({
        height: '69px',
        marginBottom: '2em'
    }, 400, function() { 
        $(this).removeClass('active');
        $(this).children('.testleft').remove();
        $(this).children('.testright').remove();
    });
}

$('.list_box > .game_image').click(function (e) {    
    if ($(this).parent().hasClass('active')) {
        $(this).infoCardDisable();
    } else {        
        $(this).infoCardDisable();

        $(this).parent().append('<span class="testleft">L.Test</span><span class="testright">R.Test</span>');

        $(this).parent().addClass('active').stop().animate({
            height: '103px',
            marginBottom: '-2px'
        }, 400);
    }
    return false;
});

基本的な目標は、list_box要素を下向きに展開して、画像がクリックされたときに追加のコンテンツを表示することです。このアクションは、コンテンツの配置やフローに影響を与えないようにする必要があります。

FirefoxとIEの両方で正常に動作しますが、Chromeにはさまざまな問題があります。

1）フロート：左; そしてfloat：right; テキスト上にあると、ボックスが他のどの要素よりも上にぎこちなくスタックします。フロートを外せば直せますが、要素を配置するためにフロートが必要です。

2）全体として、周囲のすべての要素が飛び交います。これは、display：inline-blockをlist_elementから削除することで修正できますが、残念ながらそれはオプションではありません。

私のテストはFirefox（18.0.1）、Chrome（24.0.1312.52）、Internet Explorer（9.0.8）で行われました。

すっごく...何かアイデアはありますか？

4

1 に答える 1

2

Chromeのデフォルトvertical-alignは時々奇妙に動作しますが、明示的に設定することで解決できます。

.list_box {
    [...]
    vertical-align: top;
}

フィドル

于 2013-01-19T22:26:26.847 に答える