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>

Css在chrome中无法正确显示

0 个答案: