页面布局不同于Mozilla和Chrome

我在登录页面上有一些设计问题。我做了它，有些元素在不同的浏览器中是不一样的（如下图所示）。我是新来设计的东西，所以我把代码放在低处，因为我在这里犯了一个愚蠢的错误。页面布局不同于Mozilla和Chrome

enter image description here

<!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>

来源

2011-08-27 1110

为了简单起见，我现在将一些样式内联。 – 1110