Question

我正在尝试在每个浏览器上正确显示/登录这个登录页面到目前为止它只显示我希望它在其他浏览器上的IE9上工作firefox / chrome表单部分在左侧而不是在中间。（用户名，密码，发布键和登录按钮都必须位于页面中间，并且在重新调整浏览器大小时不会移动。）

有人可以看一下，看看我做错了吗？

感谢您的帮助......

这是HTML CODE：

<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 mode（这在浏览器之间是不一致的，并且因为在有缺陷的浏览器是常态时编写的网站的兼容性而故意错误）。

添加a Doctype
执行automated QA

另外，请避免layout tables和use CSS for form layout。

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

1 个答案: