IE/OPera 以外のすべてのブラウザーで margin-top にこの問題がありました。div の margin-top を -800px に設定しました。IE で div の位置をトレースすると、Opera と同じように -800px になりますが、FF/ Chrome では 300px が追加されるため、Div は margin-top の -1100px にあると表示されます。
マージンの代わりにパディングを使用するのがベスト プラクティスであることがわかりましたが、全体的な概念についてはかなり新しいものです。今では、この 300 ピクセルの追加がどこから来るのかわかりません。私は実際に、この div を html の先頭と html の最後、開始 body タグのすぐ下 (現在の状態) と終了 body タグのすぐ上のボタンに配置しましたが、どちらも同じ結果になります。余分なピクセルの。
ここで問題を確認できます: http://www.kassandrafoto.com/上部のメイン メニューで Kassandra Cruz をクリックすると、余分な余白または 300 ピクセルのギャップが表示されます。FireFox のようなデザインが必要です。 Chrome、しかしこの場合、IE が私がやりたいように動作しているのは奇妙です: margin-top は -800 であり、-1100 ではありません (私はこの違いで遊んでいるのでアニメーションは正しいですが、ここでの問題は ¿ px から来た?.
これは、問題の div の CSS です。
#kassaInfo{
width:745px;
height:671px;
color:#74CCE5;
position:absolute;
margin:0px;
z-index:1000;
left:50%;
margin-top:-800px;
background-image:url(http://www.kassandrafoto.com/images/kassaInfo.png);
background-repeat:no-repeat;
}
body{
margin:0;
width:100%;
height:100%;
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
background-image:url(http://www.kassandrafoto.com/images/bg.jpg);
background-repeat:repeat-x;
overflow:hidden;
}
div が最初のものであることがわかるように、これは html コードです。
<body id='body'>
<div id="kassaInfo">
<div id="closeKassaBtn"></div>
</div><!--The rest of the Code-->
</body>
ここに最初の Js アクションがあります。これは div ベースをその幅の半分だけ中央に配置するだけです (これはうまくいきます)。PS。Greensock TweenMax JS ライブラリを使用しましたが、マージンのトゥイーン移動にすぎません。
var $kassaInfo = document.getElementById('kassaInfo');
var $kassaMargin = findMargin('kassaInfo');
TweenMax.to($kassaInfo,1,{css:{alpha:0.6, marginLeft:$kassaMargin},ease:Expo.easeOut});
クリックイベントの関数は次のとおりです。
var $kassaInfo= document.getElementById('kassaInfo');
TweenMax.to($kassaInfo,1{css{alpha:1, marginTop:220},ease:Expo.easeOut});
div が誰からも外にあり、絶対的であることがわかるように、FF/Chrome に余分なスペースがある理由がわかりません。
私を助けることができる助けやヒントをありがとう。ご挨拶。