在某些浏览器上页面无法正确显示

Question

我试图使此登录页面在每个浏览器上正确显示/格式化，到目前为止，它仅显示了我希望它如何在其他浏览器的IE9上运行（Firefox / chrome），表单部分位于左侧，而不位于中间。 （“用户名”，“密码”，“发布键”和“登录”按钮都必须位于页面中间，并且在调整浏览器大小时不能移动。）

有人可以看一下，看看我在做什么错吗？

谢谢你的帮助...

这是HTML代码：

<script type="text/javascript">
// Return true if unable to open a new window
function popup_blocked() {
  var popup = window.open('','_blank','toolbar=no,scrollbars=no','width=0,height=0');
  if (!popup) {
    return true;
  } else {
    popup.close();
    return false;
  }
}

if(popup_blocked()) {
  alert('This page requires that you enabled popups in order to process and display content properly.');
} else {
  //alert('POPUPS ARE ALLOWED! THANK YOU!');
}
</script>

<html><head><title>Login Page</title>
<style type="text/css">
.auto-style2 {
    margin-right: 261px;
}
</style>
    <style type="text/css">
.style1 {
    vertical-align: top;
}
    .auto-style4 {
        text-align: center;
    }
    </style>

</head>
<style type="text/css">
*                   { margin: 0; padding: 0; }
body                { font-family: Georgia, serif; background: url(login-page-bg.jpg) top center no-repeat #c4c4c4; color: #3a3a3a;  }

.clear              { clear: both; }

form                { width: 406px; margin: 170px auto 0; }

legend              { display: none; }

fieldset            { border: 0; }

label               { width: 115px; text-align: right; float: left; margin: 0 10px 0 0; padding: 9px 0 0 0; font-size: 16px; }

input               { width: 220px; display: block; padding: 4px; margin: 0 0 10px 0; font-size: 18px;
                      color: #3a3a3a; font-family: Georgia, serif;}
input[type=checkbox]{ width: 20px; margin: 0; display: inline-block; }

.button             { background: url(button-bg.png) repeat-x top center; border: 1px solid #999;
                      -moz-border-radius: 5px; padding: 5px; color: black; font-weight: bold;
                      -webkit-border-radius: 5px; font-size: 13px;  width: 70px; }
.button:hover       { background: white; color: black; }
    .auto-style5 {
    text-decoration: none;
}
.auto-style6 {
    color: #3A3A3A;
}
    .auto-style7 {
    font-size: x-small;
}
    </style>

<BODY onload="resetSession();setFocus(document.frmLogin.login);" style="margin-top: 150">


<table width=100%>
<form action="login_page.asp" method="post" name="frmLogin" class="auto-style2" style="width: 100%">
<div class="auto-style4" style="position: absolute; width: 100%; height: 174px; z-index: 1; left: 308px; top: 169px">
<input type="hidden" name="action" value="validate_login">
<table border="0" align="center">
<tr>
<td align="right">Username&nbsp; </td>
<td>
<input type="text" name="login" style="height: 34px">
</td>
</tr>
<tr>
<td align="right">Password&nbsp; </td>
<td><input name="password" style="height: 34px" type="password">
</td>
</tr>
    <tr>
<td align="right">Pub Key&nbsp; </td>
<td><input name="pasword" style="height: 34px" type="password">
</td>
    </tr>
<tr>
<td align="right">
</td>
<td>
<!--<input type="submit" VALUE="Login">-->
<input type="submit" style="margin: 0px 0 0 149px;" class="button" name="commit" value="Log in">    
</td>
</tr>
</table>
    </div>
</form></table>


<p class="auto-style4"><br><br>All Login Attempts are Logged.<br>
<br>
<span class="auto-style7">(11/16/2012 16:12)</span></p>
</body></html>

Answer 1

您的HTML无效（正在引起麻烦），并且您没有Doctype，因此浏览器将进入Quirks模式 （这在浏览器之间是不一致的，并且有意与其他有错误的浏览器兼容的网站兼容）。

• 添加文档类型
• 执行自动质量检查

另外，请避免使用 布局表，而将CSS用于表单layout 。