CSS无法在Chrome中正确显示

Question

我正在尝试使用css编写html网页，除非当我尝试在Google Chrome上访问该网站时，该页面看起来像屏幕截图1，但是如果我在Internet Explorer中打开它，它看起来像屏幕截图2 ...它们都应该显示如屏幕截图2所示，如果我在手机上以chrome方式打开它，在手机上以safari方式打开它，但笔记本电脑上的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;

以“联系人”样式和

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>