我在與鍍鉻也許可以和跨瀏覽器體驗的人一個奇怪的顯示不一致可以在其上揭示。鉻,利潤和jQuery動畫
小提琴: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 ...任何想法?
哇!我甚至沒有想過檢查垂直對齊。非常感謝,像魅力一樣工作!只要SO會讓我接受就會接受。 – Bio2hazard
不客氣。 '=]'這是我第一次打賭,因爲我過去經歷過多次Chrome的垂直對齊問題,其HTML5 vertical-align:baseline(默認值)似乎與其他瀏覽器的行爲有所不同,具體取決於上下文等作爲你的浮動內容。我也遇到過Chrome中的vertical-align:top問題,裏面有兒童文本節點,但這不在這個問題的範圍之內。 'X]' –