Question

IE 7和9在#wrapper的右侧显示#logon。

实时页面位于：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有什么问题？

Answer 1

确保你在Floated Elements之后clear; both并确保...如果你有一个绝对定位的元素，让父元素具有相对位置。

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

当然，在您声明浮动元素之后，请确保在它们之后添加一个清除。

#element {
   clear: both;}

希望有所帮助！

Answer 2

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

为什么IE在这里错误处理CSS自动保证金？

2 个答案: