鉻，利潤和jQuery動畫

Question

我在與鍍鉻也許可以和跨瀏覽器體驗的人一個奇怪的顯示不一致可以在其上揭示。

小提琴：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，但鍍鉻有各種各樣的與它的問題。

1）float：left;和float：right;在文本上導致框比其他任何元素都笨拙地卡住更高。可以通過去除浮動來固定，但我需要它們來定位元素。

2）整個事情讓周圍所有的元素跳來跳去。這可以通過從list_element中刪除display：inline-block來修復，但不幸的是這不是一個選項。

我的測試是在火狐（18.0.1），鉻（24.0.1312.52）和Internet Explorer（9.0.8）來完成。

Sooo ...任何想法？

Answer 1

Chrome瀏覽器的默認行爲vertical-align古怪有時候，你可以通過顯式設置它解決它：

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

Fiddle