javascript - Chrome、边距和 jQuery 动画

Question

我在使用 chrome 时出现奇怪的显示不一致，也许具有跨浏览器经验的人可以阐明它。

fiddle :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 :左；和 float :对；在文本上导致框笨拙地卡在比任何其他元素更高的位置。可以通过移除 float 来修复，但我需要它们来定位元素。

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

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

Sooo...有什么想法吗？

Answer 1

Chrome 默认的 vertical-align 有时会表现得很奇怪，你可以通过显式设置来解决:

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

Fiddle