Question

我在所有浏览器中都有margin-top这个问题，但IE / OPera，我在-800px上设置了div的margin-top，如果我跟踪IE中的div位置是-800px，就像在Opera中一样，但是在FF / Chrome中，它增加了300px，因此它表示Div在-1100px处于保证金顶部。

我已经看到最好的做法是使用填充而不是边距，但我对整个概念都很陌生。到目前为止，我无法看到这300个额外px的来源。我实际上把这个div放在我的html的开头和html的末尾，正好在开始的body标签下面（就像现在一样），正好在关闭body标签上方的botton，两者都有相同的结果额外的像素。

你可以在这里看到问题：http://www.kassandrafoto.com/如果你点击顶部主菜单上的Kassandra Cruz，你会看到额外的保证金或300 px的差距，我希望设计在FireFox或Chrome中，但在这种情况下，IE正在运行，我想做的很奇怪：margin-top是-800而不是-1100（动画是正确的，因为我玩这个差异，但我的问题是¿那里300 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;
}

这是html代码，因为你可以看到div是第一个：

<body id='body'>

<div id="kassaInfo">
<div id="closeKassaBtn"></div>
</div><!--The rest of the Code-->
</body>

这里有第一个Js动作，它只将div基础放在其中一半的witdh（这样可以正常），所以因为它的50％左侧将始终位于中心位置。 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中有额外的空间。

感谢任何可以帮助我的帮助或提示。问候。

Answer 1

使用top而不是margin-top是正确的方法，正如我所说的那样，我很新手所以在使用position：absolute时我不知道这有什么不同。就像没有保证金的时候是绝对的，只是简单的左，上等等。

无论如何，我无法明确为什么额外的300px，如果有人可以添加一些关于此的信息，将非常感激。

问候。

不同的Margin-Top在所有浏览器中，但IE8 / Opera

1 个答案: