0

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

我正在制作一个网站，并希望将 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>
4

3 回答 3

1

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

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

于 2012-12-26T13:40:17.120 回答
1

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 */
}
于 2012-12-26T13:46:11.530 回答
1

正如我所指出的，该margin-top指令似乎是根据其父元素的宽度计算其百分比。但top指令并非如此。因此，只需更改：

margin-top: 40%;

到：

top: 40%;

我在 Firefox、Chrome 和 IE8 上试过这个，它们都工作得一样。

于 2012-12-26T13:55:05.927 回答