Css mozilla和chrome中的页面布局不同
我的登录页面上有一些设计问题。我做了，有些元素在不同的浏览器中是不一样的（比如下面的图片）。我是新来设计东西的，所以我把代码放在下面，因为我犯了一些愚蠢的错误Css mozilla和chrome中的页面布局不同,css,html,layout,browser,Css,Html,Layout,Browser,我的登录页面上有一些设计问题。我做了，有些元素在不同的浏览器中是不一样的（比如下面的图片）。我是新来设计东西的，所以我把代码放在下面，因为我犯了一些愚蠢的错误 <!DOCTYPE html> <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <
<!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>
JS-Bin
身体
{
背景#3C5975；
宽度：950px；
保证金：0自动；
}
文章、旁白、数字、页脚、页眉、H组、菜单、导航、节
{
显示：块；
}
P
{
颜色：#ffffff；
保证金：0；
填充：0；
垫底：5px；
}
#登记表
{
宽度：160px；
边缘顶部：10px；
左边距：10px；
文本对齐：右对齐；
}
#左主内容
{
宽度：50%；
浮动：左；
身高：100%；
}
#rightMainContent
{
宽度：50%；
浮动：对；
身高：100%；
}
#李娜
{
颜色：#ffffff；
文字装饰：无；
字体大小：12px；
}
#登录框a
{
颜色：#ffffff；
文字装饰：无；
}
#btnSignUp
{
高度：21px；
颜色：#ffffff；
文字装饰：无；
字体大小：粗体；
文本对齐：居中；
背景：#fd8402；
边框样式：无；
文本阴影：1px 1px 1px#000000；
-moz边界半径：2px；
-webkit边界半径：2px；
边界半径：2px；
}
#btnLogin
{
高度：21px；
颜色：#ffffff；
文字装饰：无；
字体大小：粗体；
文本对齐：居中；
背景：#fd8402；
边框样式：无；
文本阴影：1px 1px 1px#000000；
-moz边界半径：2px；
-webkit边界半径：2px；
边界半径：2px；
}
myCityNook
@使用（Html.BeginForm（））
{
@Html.TextBoxFor（x=>x.Username，新的{PlaceHolder=“My Username”}）
@Html.TextBoxFor（x=>x.Password，新的{PlaceHolder=“My Password”}）
记得我吗
}
???
Lorem Ipsum只是印刷和排版行业的虚拟文本。洛勒姆
Ipsum自16世纪以来一直是行业标准的虚拟文本，当时
这位不知名的印刷工拿起一个铅字厨房，把它拼凑成一本铅字样本书。
它不仅存活了五个世纪，而且还跨越了电子排版，
基本保持不变。它在20世纪60年代随着发行而流行起来
包含Lorem Ipsum段落的Letraset表，以及最近的桌面
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本
现在制作您的个人资料
@使用（Html.BeginForm（））
{
???
???
???
???
???
???
???
???
@TextBox（“FirstName”，new{PlaceHolder=“My First Name”}）
@TextBox（“LastName”，new{PlaceHolder=“My Last Name”}）
@TextBox（“Email”，new{PlaceHolder=“My Email”}）
@text框（“密码”，“新的”{PlaceHolder=“我的密码”}）
}
©2011 mycitynook.com
查看此项了解更多信息：此外，Firefox和Chrome使用不同的渲染引擎。即使在CSS重置之后，您可能仍然会注意到两者之间的细微差异。这没关系。记住，网站最重要的部分是内容——确保内容良好、可读性和可访问性——这样你就会有很多快乐的用户。此外，Firefox和Chrome使用不同的呈现引擎。即使在CSS重置之后，您可能仍然会注意到两者之间的细微差异。这没关系。记住，你的网站最重要的部分是内容——确保内容是好的、可读的和可访问的——你会有很多快乐的我们