0

我在除 IE/OPera 之外的所有浏览器中都遇到了 margin-top 这个问题，我在 -800px 上设置了一个 div 的 margin-top，如果我跟踪 IE 中的 div 位置是 -800px，就像在 Opera 中一样，但在 FF/ Chrome 它增加了 300px，所以它说 Div 在顶部边缘为 -1100px。

我已经看到最佳实践是使用填充而不是边距，但我对整个概念还是很陌生。到目前为止，我无法看到这 300 额外像素是从哪里来的。实际上，我将这个 div 放在了我的 html 的开头和 html 的末尾，就在开始正文标记的正下方（就像现在一样），就在结束正文标记上方的底部，两者都具有相同的结果额外的像素。

您可以在这里看到问题：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% leftleft 将始终位于中心。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 中有额外的空间。

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

4

1 回答 1

0

使用 top 而不是 margin-top 是正确的方法，正如我所说的，我是个新手，所以在使用 position:absolute 时我不知道有什么不同。就像是绝对的时候没有边距，只是简单的左边，顶部等。

无论如何，我无法弄清楚为什么额外的 300 像素，如果有人可以添加一些有关此的信息，将不胜感激。

问候。

于 2013-02-11T23:21:24.107 回答