当我尝试使用错误的凭据提交登录时,页面加载了错误的css样式。我检查索引.php如果用户有活动帐户,如果没有,我会包括登录.php页面。当我删除顶部的 php 时,我没有收到任何错误,并且页面采用正确的 css。因此,总是当出现错误时,页面看起来与设计完全不同。也许浏览器不加载 css?还是完整的 CSS?
<?php
// show negative messages
if ($account->errors) {
foreach ($account->errors as $error) {
echo $error;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- INITIALISE -->
<meta charset="utf-8">
<title>Sign in</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- STYLESHEETS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet" >
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="form-wrapper text-center">
<hr>
<form class="form-signin" role="form" action="index.php" name="loginform" method="post">
<h2 class="form-signin-heading">log in.</h2>
<input type="text" class="input-block-level" name="posted_username" placeholder="User">
<input type="password" class="input-block-level" name="posted_password" placeholder="Pass">
<button class="btn btn-small btn-danger" type="submit" name="login">Log in</button>
</form>
</div> <!-- /form-wrapper -->
<!-- BOOTSTRAP -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
您将错误消息转储到页面中,在打开<!DOCTYPE>
/<html>
标签之前,这是不允许的。这可能是触发IE以Quirks模式渲染页面,这基本上将整个CSS渲染系统更改为老式的IE6风格的垃圾。
将错误消息移动到<body>
区域内更合适的位置,您可能会发现 CSS 神奇地开始更好地工作。
这是在评论中说的,但我支持这个意见。您没有使用您提交的代码输出有效的 html。
将代码移动到正文标签内,可能位于主div 标签内。