これは確かに Firefox ( v14 テスト済み) のバグです。
ただし、良いニュースは、現在の Web ページ レイアウトを維持する、選択できる 3 つの簡単な解決策を発見したことです。
.click()
それだけでは不十分な場合は、単一の機能の代替マークアップを備えたボーナスの jsFiddle も用意しました。
参考: jsFiddle1
ソリューション 1 HTML:
<div id="status">Initial</div>
ソリューション 1 CSS:
#status{
display: table;
}
参考: jsFiddle2
ソリューション 2 HTML:
<div id="status">Initial</div> <br />
ソリューション 2 CSS:
#status{
display: inline-block;
}
参考: jsFiddle3
ソリューション 3 HTML:
<div id="status">Initial</div>
ソリューション 3 CSS:
#status{
font-size: 28px;
}
また、 jQuery クリック イベント リスナーをすべて使用する代わりに、 1 つの jQuery クリック イベント リスナーのみを使用する場合は、上記と同じバグ修正 CSS を使用するこのボーナス バージョンを考慮することができます。
参考: jsFiddleシングルクリック
ソリューション シングルクリック HTML:
<div id="status">Initial</div>
<div id="links">
<a id="a1" href="#">Link 1</a>
<a id="a2" href="#">Link 2</a>
<a id="a3" href="#">Link 3</a>
</div>
ソリューション シングル クリック jQuery:
function showIt(message, opacity, duration) {
$('#status').stop().html(message).animate({opacity: opacity}, duration, 'easeInExpo');
}
jQuery('#links a').click(function(event) {
switch (this.id) {
case 'a1':
showIt('Foo!', 1, 0);
break;
case 'a2':
showIt('Bar!', 1, 0);
break;
case 'a3':
showIt('Quux...', 0, 3000);
break;
}
event.preventDefault();
});