0
私はcssを使用してhtmlウェブページを作成しようとしていますが、Google Chromeのサイトにアクセスしようとすると、ページはスクリーンショット1のように見えますが、 ...彼らは両方クロムにCssが正しく表示されない
..私は自分の携帯電話に自分の携帯電話やサファリにクロームで開きちょうど私のラップトップ上のクロムはそれを台無し場合はスクリーンショット2としてそれが動作を表示すると仮定されていますコード：
"連絡先" のスタイルとposition: relative;
top: 50px;
bottom: 0;
で
@import url('https://fonts.googleapis.com/css?family=Lekton');
body{
\t background-image: url('background.png');
background-repeat: no-repeat;
background-attachment: fixed;
\t background-size: 100%;
\t margin: 0;
\t padding: 0;
\t 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;
\t 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;
\t border: none;
\t background: transparent;
border-bottom: 2px solid black;
\t width: 200px;
}
.login-title{
\t font-size: 20px; \t
}
.contact{
\t height: 400px;
\t width: 100%;
\t background: white;
\t position: absolute;
\t top: 700px;
\t text-align: center;
\t font-family: 'Lekton', sans-serif;
}
.loginBox{
\t height: 350px;
\t width: 280px;
\t background: transparent;
\t position: relative;
\t top: 50px;
\t bottom: 0;
\t padding: 1rem;
\t text-align: center;
border-radius: 8px;
\t margin: auto;
}
.button5 {
background-color: transparent;
color: black;
border: 2px solid black;
\t 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" />
\t <title>Site</title>
</head>
<body>
\t <ul>
\t \t <li><a href="#home"></a></li>
\t \t <li><a href="#">Login</a></li>
\t </ul>
\t <div class="loginBox">
\t \t <p class="login-title"><strong>LOGIN</strong></p>
\t \t <input type="text" placeholder="Username"></input>
\t \t <br />
\t \t <input type="password" placeholder="Password"></input>
\t \t <br />
\t \t <a href="#login"><button class="button5">Login</button></a>
\t \t <br />
\t \t <p> - OR - </p>
\t \t <a href="#register"><button class="button5">Register</button></a>
\t \t <br />
\t </div>
\t <div class="contact">
\t \t <h2>Contact</h2>
\t </div>
</body>
</html>
スニペットであなたのHTML＆CSSを追加し、まだjsfiddle –
ベターのようなあなたのCSS＆HTMLコードを追加します（' <を使用します> 'ボタン） – Manngo
ありがとう！私はそれを加えました@Manngo –