私は現在、私のクライアント用のバックエンドインターフェイスを開発しており、レンガの壁にぶつかりました。Internet Explorer（9ベータ版を含むすべてのバージョン）とChromeが希望どおりにページを表示していないようです。FirefoxとSafariはページを完全に表示しています。私はそれがサファリで動作するがクロムでは動作しないのはかなり奇妙だと思います..とにかくそれは要点を超えています。
SafariとFirefoxでのフォームの外観-望ましい結果は次のとおりです。
SafariとFirefox以外のすべてのブラウザでフォームがどのように表示されるか-これは望ましくありません。
私は、これらの他のブラウザのcssで設定されている幅に背景を拡大する方法を模索しています。私は今日約5時間これに固執していて、それは私にとって非常にイライラし始めているので、どんなヒントやヒントも大歓迎です。
いくつかの助けを借りて、問題をjQueryプラグインの「等しい高さの列」に絞り込みましたが、効果が必要なので、他のブラウザーでこれを機能させる方法は確かにあります。
私のHTMLは次のとおりです。
<head>
<meta charset="UTF-8">
<title>User Login</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
<link rel="stylesheet" href="stylesheets/styles.css" type="text/css" />
<script src="javascript/jquery.js" type="text/javascript"></script>
<script src="javascript/jquery.equalHeightColumns.js" type="text/javascript"></script>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<script type="text/javascript">
$(document).ready(function() {
$("#form_left, #form_right, #form_right input").equalHeightColumns();
});
</script>
</head>
<body>
<a href="forgot_password.html" class="loginmeta">Forgot Password?</a>
<div id="container">
<div id="header">
<h1><a href="#">User Login</a></h1>
</div>
<div id="form">
<form name="login" action="#" method="post">
<div id="form_left">
<label for="">Username</label>
<input type="text" id="username" />
<label for="">Password</label>
<input type="password" id="password" />
</div>
<div id="form_right">
<input type="submit" name="submit" value="Log In" />
</div>
<div class="clear"></div>
</form>
</div>
</div>
</body>
およびCSS：
//*
TYPE
*/
a.loginmeta { position: absolute;
right: 20px; top: 20px;
color: #4a4f5b;
font-size: 12px; }
a.loginmeta:hover { color: #5d6472; }
/*
STRUCTURE
*/
body { background: url('../images/page_background.png') repeat; }
#container { width: 480px; display: block;
margin: 100px auto 0 auto; }
/*
FORM
*/
form { width: 480px; margin: 30px 0 15px 0; }
form label { color: #919191;
text-transform: uppercase;
display: block;
margin-bottom: 10px; }
form input { background: #ffffff;
border: 1px solid #d1d1d1;
font-size: 17px;
color: #414141;
padding: 10px; margin-bottom: 10px;
width: 328px; }
#form_left, #form_right { -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}
#form_left { float: left;
width: 350px;
background: url('../images/form_background.png') repeat-x bottom left #f3f3f3;
padding: 20px 20px 10px 20px; }
#form_right { float: right;
background: url('../images/form_background.png') repeat-x bottom left #f3f3f3; padding-bottom: 30px; }
#form_right input { width: 80px;
font-size: 12px;
text-transform: uppercase;
color: #939393;
background: none;
border: none;
margin: 15px 0;
padding: 0; }
***
ありがとうございました！