0

私はこのログインページをすべてのブラウザーで正しく表示/フォーマットしようとしていますが、これまでのところ、他のブラウザーの IE9 でどのように動作させたいかを示しているだけです。フォームセクションは左側にあり、中央にはありません。(ユーザー名、パスワード、公開鍵、およびログイン ボタンはすべてページの中央に配置する必要があり、ブラウザーのサイズが変更されても移動しません。)

誰かがそれを見て、私が間違っていることを理解できますか?

助けてくれてありがとう...

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 に答える