このページを見ると、3 つのボックス (div#threeBlockOnTop) と、その下の長いボックス (div#squeeze) にランダムなコンテンツが表示されます。3 つのボックスの上下にある青い隙間は、同じサイズ (約 30px) にする必要があります。しかし、Firefox では、3 つのボックスのギャップがより広くなります。これは、何らかの奇妙な理由で、下の要素の上部マージンの影響を受けるためです。
Firebug で div#squeeze の margin-top をいじると、上の 3 つのボックスの位置も変化することがわかります。なにが問題ですか？そしてそれは、永久に使用できる CSS のいくつかの正当な特性に関係していますか?
パフォーマンスのためにcssのtramsform3dを使用する
-webkit-transform:translate3d(-30px,0, 0);
-moz-transform:translate3d(-30px,0, 0);
transform:translate3d(-30px,0, 0);
これは他のオブジェクトには影響しません
すべてのブラウザをリセットすることを忘れないでください。 各ブラウザには、リセットスタイルと標準のパディング、マージン、ボックスサイズがあります...これを試してください。
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0;
margin:0;
}
<div class="clear"></div>の終了タグの前にがありdiv#threeBlockOnTopます。
この終了タグの後にある必要があります。
ブラウザ固有のcssに関連していると思います..firefoxの-webkit-padding for chromeパディングを使用して削除してみてください-moz-pdding..