Chrome、边距和 jQuery 动画

Question

我的 chrome 显示不一致，也许有跨浏览器经验的人可以解释一下。

小提琴：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) 浮动：左；和浮动：对；在文本上会导致框比任何其他元素尴尬地卡在更高的位置。可以通过移除浮动来修复，但我需要它们来定位元素。

2) 整个东西让它周围的所有元素都跳来跳去。这可以通过从 list_element 中删除 display: inline-block 来解决，但不幸的是这不是一个选项。

我的测试是在 Firefox(18.0.1)、Chrome(24.0.1312.52) 和 Internet Explorer(9.0.8) 上完成的。

太好了……有什么想法吗？

Answer 1

Chrome 的默认 vertical-align 有时会出现奇怪的行为，您可以通过显式设置来解决它：

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

Fiddle