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）上完成的。

Sooo ......任何想法？

Answer 1

Chrome的默认vertical-align有时表现得很奇怪，您可以通过明确设置来解决它：

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

Fiddle

Chrome，边距和jQuery动画

1 个答案: