我的登录页面有一些设计问题。我做到了，有些元素在不同的浏览器中是不一样的(如下图)。我是设计新手，所以我把代码放在下面，因为我在这里犯了一些愚蠢的错误。
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body
{
background: #3C5975;
width: 950px;
margin: 0 auto;
}
article, aside, figure, footer, header, hgroup, menu, nav, section
{
display: block;
}
p
{
color: #ffffff;
margin: 0;
padding: 0;
padding-bottom: 5px;
}
#registrationForm
{
width: 160px;
margin-top: 10px;
margin-left: 10px;
text-align: right;
}
#leftMainContent
{
width: 50%;
float: left;
height: 100%;
}
#rightMainContent
{
width: 50%;
float: right;
height: 100%;
}
#footerLinks li a
{
color: #ffffff;
text-decoration: none;
font-size: 12px;
}
#loginBox a
{
color: #ffffff;
text-decoration: none;
}
#btnSignUp
{
height: 21px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
text-align: center;
background: #fd8402;
border-style: none;
text-shadow: 1px 1px 1px #000000;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#btnLogin
{
height: 21px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
text-align: center;
background: #fd8402;
border-style: none;
text-shadow: 1px 1px 1px #000000;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
</style>
</head>
<body>
<header style="background: #2d4a66; width: 950px; height: 50px; display: table;">
<div style="width: 50%; float: left; display: table-cell; margin-top: 15px;">
<h1 style="margin: 0; padding: 0; color: #ffffff;">
myCityNook</h1>
</div>
<div id="loginBox" style="float: right; margin-top: 10px; text-align: right;">
@using (Html.BeginForm())
{
<div>
@Html.TextBoxFor(x => x.Username, new { PlaceHolder = "My Username" })
@Html.TextBoxFor(x => x.Password, new { PlaceHolder = "My Password" })
<input id="btnLogin" type="submit" value="Log in" />
</div>
<div>
<label id="remember" style="float: left;">
<input type="checkbox" />
<span style="color: #ffffff;">Remember me</span>
</label>
<p style="margin: 0; padding: 0; float: left; margin-left: 40px;">
<a href="#">Forgot it?</a></p>
</div>
}
</div>
</header>
<div id="wrapper" style="height: 400px; width: 950px; ">
<div id="leftMainContent">
<h3 style="margin: 0; padding: 0; padding-left: 15px; padding-top: 20px; color: #ffffff;">
???</h3>
<p style="padding: 15px 15px 15px 15px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="rightMainContent">
<div style="margin-left: 90px;">
<div id="registrationForm" style="">
<h4 style="margin: 0; padding: 0; padding-top: 20px; padding-bottom: 10px; color: #ffffff;">
Make your profile now</h4>
@using (Html.BeginForm())
{
<p>
<select style="width: 93%">
<option value="1">???</option>
<option value="1">???</option>
<option value="1">???</option>
<option value="1">???</option>
</select></p>
<p>
<select style="width: 93%">
<option value="1">???</option>
<option value="1">???</option>
<option value="1">???</option>
<option value="1">???</option>
</select></p>
<p>@Html.TextBox("FirstName", "", new { PlaceHolder = "My First Name" })</p>
<p>@Html.TextBox("LastName", "", new { PlaceHolder = "My Last Name" })</p>
<p>@Html.TextBox("Email", "", new { PlaceHolder = "My Email" })</p>
<p>@Html.TextBox("Password", "", new { PlaceHolder = "My Password" })</p>
<p>
<input id="btnSignUp" type="submit" value="Sign up" /></p>
}
</div>
</div>
</div>
</div>
<footer style="background: #2d4a66; color: #ffffff; overflow: hidden; vertical-align: middle;">
<p style="float: left; font-size: 12px;">
© 2011 mycitynook.com</p>
<ul id="footerLinks" style="margin: 0; padding: 0; list-style: none; float: right;">
<li style="display: inline;"><a href="#">About</a></li>
<li style="display: inline;"><a href="#">User Agreement</a></li>
<li style="display: inline;"><a href="#">Privacy Policy</a></li>
<li style="display: inline;"><a href="#">Careers</a></li>
<li style="display: inline;"><a href="#">Send Feedback</a></li>
</ul>
</footer>
</body>
</html>
最佳答案
使用重置 CSS。
检查此以获取更多信息:http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
关于css - mozilla 和 chrome 的页面布局不一样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7213111/