0

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

有人可以看看它，看看我做错了什么吗？

谢谢你的帮助...

这是 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>
4

1 回答 1

3

您的 HTML 无效（这是自找麻烦）并且您没有 Doctype，因此浏览器将进入Quirks 模式（这在浏览器之间是不一致的，并且为了与有问题的浏览器成为常态时编写的网站的兼容性而故意出现错误）。

此外，避免布局表格并使用 CSS 进行表单布局。

于 2012-11-16T22:36:41.810 回答