爲什麼IE在這裏錯誤地處理了CSS的自動空白？

IE 7和9在#wrapper的右側顯示#logon。爲什麼IE在這裏錯誤地處理了CSS的自動空白？

直播頁面是在這裏：http://lalabs.hiv411.org/logout.php

CSS：

#wrapper { 
    position:absolute; 
    width:960px; 
    min-height:680px; 
    background:url(../g/bg.jpg) no-repeat #6CB8D2; 
    top:0; 
    left: 50%; 
    margin-left: -480px; 
} 

#logon { 
    position:relative; 
    background:url(../g/login_bg.png) no-repeat;  
    width:656px; 
    height:484px; 
    margin: 135px auto; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
} 

#logonInner { 
    text-align:center; 
    padding: 66px 0 0 0; 
    font-size:14px; 
}

HTML是死的簡單...

<div id="wrapper"> 
<div id="logon"> 
<div id="logonInner"> 
<img src="g/welcome.gif" alt="Welcome to the Louisiana Office of Public Health Survey of Laboratories and Facilities" name="welcome" width="397" height="110" id="welcome" /> 
<p>Please login using the username and password you were assigned.</p> 

<form id="logonForm" method="post" action=""> 
    <label class="logonFormLabel"><input type="text" name="email" id="email" value="<?=$_POST['email']?>" class="required email logonFormText "/><br /> 
USER NAME</label> 

    <label class="logonFormLabel"><input type="password" name="Password" id="Password" value="" class="required logonFormText"/><br /> 
PASSWORD</label> 

<p style="padding:30px 0 0 0"><a href="lookup_facility.php" class="loginNav">Lookup Your Laboratory or Facility</a> <a href="request_login.php" class="loginNav">Request Login Information</a> <a href="forgot_password.php" class="loginNav">Forgot Your Password?</a></p> 
<p style="padding:20px 0 0 0"><input type="submit" class="button" name="submit" id="submit" value="SUBMIT" /></p> 
</form> 
</div><!--logonInner--> 
</div><!--logon--> 
</div><!--wrapper-->

這有什麼錯我的CSS？

來源

2012-03-12 jerrygarciuh

我添加了text-align：center到#wrapper。

來源

2012-03-13 15:28:08 jerrygarciuh

如果這可以解決您的問題，那麼您的網頁工作在怪癖模式，這是一個很大的禁忌。紅色的燈光看起來就像是包含一些無人值守的PHP輸出的doctype之上的HTML註釋。也許你應該調查一下。 – BoltClock 2012-03-13 15:30:24

確保你在浮動元素之後clear; both並確保...如果你有一個絕對定位的元素來使父元素具有相對位置。

#parent { 
    position: relative;} 
#child { 
    position: absolute;}

然後療程後，你宣佈你的浮動元素，確保你添加一個明確後他們。

#element { 
    clear: both;}

希望有幫助！

來源

2012-03-12 20:31:47

也爲#wrapper ...只要做空白：0自動; 。 – 2012-03-12 20:35:38

有麻煩記住，爲什麼我必須使用位置絕對包裝，但我相信我確實必須... – jerrygarciuh 2012-03-12 21:07:10

@jerrygarciuh：好的，我看你修好了。希望我幫助！ :-D – 2012-03-12 21:11:19

爲什麼IE在這裏錯誤地處理了CSS的自動空白？

回答

相關問題