我目前正在为我的一个客户开发一个后端接口,但我已经碰壁了。似乎 Internet Explorer(所有版本,包括 9 beta)和 Chrome 没有按需要显示页面。Firefox 和 Safari 完美地显示了页面。我觉得它适用于 safari 但不适用于 chrome,这很奇怪。无论如何,这不是重点。
表单在 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; }
***
谢谢!