除 IE8 / Opera 之外的所有浏览器中的不同 Margin-Top答案

【问题标题】：Different Margin-Top in all browser but IE8 / Opera除 IE8 / Opera 之外的所有浏览器中的不同 Margin-Top
【发布时间】：2013-02-11 20:33:18
【问题描述】：

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

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

您可以在这里看到问题：http://www.kassandrafoto.com/ 如果您单击顶部主菜单中的 Kassandra Cruz，您将看到额外的边距或 300 像素的间隙，我想要在 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 中有额外的空间。

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

【问题讨论】：

你知道你的网站是一个纯黑色的空白，JS 被禁用了吗？
哦，是的，我想设计一个 Flash 的味道，javascript 在某种程度上又回来了。

标签： javascript html css gsap

【解决方案1】：

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

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

您好。

【讨论】：