Question

我已经问过这个问题，但我没有得到具体答案。所以我想问一个简化版的问题

我正在建立一个网站，并希望将div放在特定的高度。我无法在px术语中设置margin-top，就像浏览器窗口重新调整大小一样，div保持在px。我在％中指定了这个。如果margin-top是px，那么在所有浏览器中都可以，但如果它是％，则IE9 IE10和FF表现得很疯狂。

以下代码非常简单，没有任何困难。我甚至试过重置css但是没有把它弄好。任何人都可以请一点时间帮助我。

我目前正在从硬盘上加载页面，而不是从互联网上加载。

由于

> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Train of Thought</title>
  <style type="text/css">

div.content {
  height:200px;
  visibility:visible;
  border-style: none;
  display: block;
  position: fixed;
  text-align: center;
  z-index: 1;
  padding-top: 0px;
  border-top: 0px;
  padding-bottom: 0px;
  border-bottom: 0px;
  background-color: #00FFFF;
  font-family:Arial,sans-serif;
  overflow: auto;
  margin-left: 23%;
  margin-right:25%;
  font-size:150%;
  margin-top: 40%;
}
  </style>
</head>
<body>

<div class="content">This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
<br>This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
</div>

</body>
</html>

Answer 1

如果你的意思是'表现得很疯狂'，那么当你改变浏览器大小时，div不会动态调整它的位置，原因就在于你定位它的方式。

您已将位置设置为固定，这意味着您可以按顶部，底部，左侧，右侧而不是边距来定义确切位置。

Answer 2

HTML：

<div class="wrapper">
<div class="content">This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
<br>This div is supposed to be same in all the browsers. but thisis different in them. IE9 and FF display it in lower bottom of the page while chrome displays in the middle.
</div>
</div>

CSS：

.wrapper {
position:relative;
top:0;
left:0;
width:1020px;
height:760px;
}
.content {
position:absolute;
top: /* you set it */
left: /* you set it */
/* other props */
}

Answer 3

正如我所指出的，margin-top指令似乎从它的父元素的宽度计算它的百分比。但top指令却不是这样。所以，只需改变：

margin-top: 40%;

要：

top: 40%;

我在Firefox，Chrome和IE8上尝试了这一点，他们都是一样的。

IE9 FF和chrome中的不同div位置

3 个答案: