Css 在 chrome 中显示不正确

Question

我正在尝试使用 css 编写 html 网页，除非我尝试访问 Google 上的网站 Chrome 该页面看起来像屏幕截图 1，但是如果我在 Internet Explorer 上打开它，它看起来像屏幕截图 2...它们都应该显示为屏幕截图 2 如果我在我的 phone 上的 chrome 和我的 phone 但是 chrome 在我的笔记本电脑上就搞砸了..

http://imgur.com/a/XCZQJ

http://imgur.com/a/PSwxU

代码：

@import url('https://fonts.googleapis.com/css?family=Lekton');

body{
 background-image: url('background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
 background-size: 100%;
 margin: 0;
 padding: 0;
 font-family: 'Lekton', sans-serif;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 10px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 180px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
 font-family: 'Lekton', sans-serif;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #ecf0f1;
}

input[type=text], input[type=password] {
    width: 180px;
    padding: 12px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
 border: none;
 background: transparent;
    border-bottom: 2px solid black;
 width: 200px;
}

.login-title{
 font-size: 20px; 
}

.contact{
 height: 400px;
 width: 100%;
 background: white;
 position: absolute;
 top: 700px;
 text-align: center;
 font-family: 'Lekton', sans-serif;
}

.loginBox{
 height: 350px;
 width: 280px;
 background: transparent;
 position: relative;
 top: 50px;
 bottom: 0;
 padding: 1rem;
 text-align: center;
    border-radius: 8px;
 margin: auto;
}

.button5 {
    background-color: transparent;
    color: black;
    border: 2px solid black;
 width: 180px;
}

.button5:hover {
    background-color: black;
    color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
 <title>Site</title>
</head>
<body>
 <ul>
  <li><a href="#home"></a></li>
  <li><a href="#">Login</a></li>
 </ul>
 <div class="loginBox">
  <p class="login-title"><strong>LOGIN</strong></p>
  <input type="text" placeholder="Username"></input>
  <br />
  <input type="password" placeholder="Password"></input> 
  <br />
  <a href="#login"><button class="button5">Login</button></a> 
  <br />
  <p> - OR - </p>
  <a href="#register"><button class="button5">Register</button></a> 
  <br />
 </div>
 <div class="contact">
  <h2>Contact</h2>
 </div>
</body>
</html>

Answer 1

position: absolute;
    top: 700px;

"contacts" 风格和

position: relative;
    top: 50px;
    bottom: 0;

在 "loginBox" 中，样式使其以这种方式运行。你 不需要两者。

@import url('https://fonts.googleapis.com/css?family=Lekton');

body{
 background-image: url('background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
 background-size: 100%;
 margin: 0;
 padding: 0;
 font-family: 'Lekton', sans-serif;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 10px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 180px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
 font-family: 'Lekton', sans-serif;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #ecf0f1;
}

input[type=text], input[type=password] {
    width: 180px;
    padding: 12px 10px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
 border: none;
 background: transparent;
    border-bottom: 2px solid black;
 width: 200px;
}

.login-title{
 font-size: 20px; 
}

.contact{
 height: 400px;
 width: 100%;
 background: white;
 text-align: center;
 font-family: 'Lekton', sans-serif;
    margin:auto;
}

.loginBox{
 height: 350px;
 width: 280px;
 background: transparent;
 padding: 1rem;
 text-align: center;
    border-radius: 8px;
 margin: auto;
}

.button5 {
    background-color: transparent;
    color: black;
    border: 2px solid black;
 width: 180px;
}

.button5:hover {
    background-color: black;
    color: white;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
 <title>Site</title>
</head>
<body>
 <ul>
  <li><a href="#home"></a></li>
  <li><a href="#">Login</a></li>
 </ul>
 <div class="loginBox">
  <p class="login-title"><strong>LOGIN</strong></p>
  <input type="text" placeholder="Username"></input>
  <br />
  <input type="password" placeholder="Password"></input> 
  <br />
  <a href="#login"><button class="button5">Login</button></a> 
  <br />
  <p> - OR - </p>
  <a href="#register"><button class="button5">Register</button></a> 
  <br />
 </div>
 <div class="contact">
  <h2>Contact</h2>
 </div>
</body>
</html>

Css 在 chrome 中显示不正确

Css not displaying correctly in chrome

html

css

google-chrome

internet-explorer-11