在IE9 FF和铬

不同div位置我已经问过这个问题，但我没有得到一个具体的答案。所以我想问一个简化版本的问题在IE9 FF和铬

我正在制作一个网站，并希望将div放在特定的高度。我无法像px一样设置页边距，就好像浏览器窗口重新调整大小，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>

来源

2012-12-26 M T

我测试了你的代码，它在IE9，IE10和FF中按预期工作。请在IE9，IE10和FF中定义''表现疯狂' –

'的含义，div出现在谷歌浏览器的下方。我希望它能在闪烁的chrome显示它的位置。 –

在Firefox上进行测试时，我注意到'margin-top：40％'参数的值是可用宽度的40％，而不是可用高度的40％，如您所料。 –

如果你被它的意思是“疯狂的行为”，即股利不动态调整，当你改变浏览器的大小是位置，原因是你的位置的方式。

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

来源

2012-12-26 13:40:17

我明白了。我应该使用top：40％而不是margin-top：40％ –

这是@Gareth Cornish的答案！ :)你必须接受，如果它解决了你的问题！ –

@Sven Bieder解答了问题，“帽子意味着你通过顶部，底部，左侧，右侧确定确切位置，而不是利用边距。”这是在加雷斯的回答之前 –

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-26 13:46:11

正如我提到的，margin-top指令似乎来计算它从它的宽度百分比的父元素。但对于top指令并非如此。所以，简单地改变：

margin-top: 40%;

要：

top: 40%;

我想这在Firefox，Chrome和IE8，和他们所有的工作一样。

来源

2012-12-26 13:55:05

回答

相关问题