在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

回答

相關問題