HTML/CSS登録フォーム

Question

私は現在、登録フォームhtml/cssを作成中です。私は、ブラウザの種類によって入力の幅が違うことに気付きました。どうすればこの問題を解決し、サインアップフォームがすべてのブラウザと互換性があるかを確認できます。私のサインアップフォームは、私がコーディングしている場所であるので、クロムのために完全に機能します。

ul { 
 
    background-color: #000000; 
 
} 
 
li a:hover { 
 
    background-color: #0cf72a; 
 
} 
 
.word-container { 
 
    width: 500px; 
 
    height: 50px; 
 
    margin: auto; 
 
    position: relative; 
 
    top: 80px; 
 
} 
 
.word-container h1 { 
 
    margin: 0; 
 
    text-align: center; 
 
    color: #ab0a0a; 
 
} 
 
.register-container { 
 
    width: 600px; 
 
    height: 350px; 
 
    margin: auto; 
 
    position: relative; 
 
    top: 100px; 
 
    border: 1px solid #000; 
 
} 
 
.fname input[type="text"] { 
 
    position: relative; 
 
    left: 115px; 
 
    top: 30px; 
 
    padding: 8px; 
 
} 
 
.lname input[type="text"] { 
 
    position: relative; 
 
    left: 314px; 
 
    top: -5.5px; 
 
    padding: 8px; 
 
} 
 
.userid input[type="text"] { 
 
    position: relative; 
 
    left: 115px; 
 
    padding: 8px; 
 
    top: 10px; 
 
} 
 
.pwd input[type="password"] { 
 
    position: relative; 
 
    padding: 8px; 
 
    left: 115px; 
 
    top: 25px; 
 
} 
 
.email input[type="email"] { 
 
    position: relative; 
 
    padding: 8px; 
 
    left: 115px; 
 
    top: 40px; 
 
} 
 
.btn button[type="submit"] { 
 
    position: relative; 
 
    left: 115px; 
 
    top: 55px; 
 
    padding: 8px; 
 
    width: 382px; 
 
    border: 1px solid #000000; 
 
    color: #ffffff; 
 
    background-color: #ab0a0a; 
 
} 
 
div.btn button[type="submit"]:hover { 
 
    background-color: rgb(255, 0, 0); 
 
}

<div class="word-container"> 
 
    <h1>Create your account</h1> 
 
</div> 
 
<div class="register-container"> 
 
    <form action="" method="POST"> 
 
    <div class="fname"> 
 
     <label> 
 
     <input type="text" placeholder="First Name" name="fname" size="20"> 
 
     </label> 
 
    </div> 
 
    <div class="lname"> 
 
     <label> 
 
     <input type="text" placeholder="Last Name" name="lname" size="20"> 
 
     </label> 
 
    </div> 
 
    <div class="userid"> 
 
     <label> 
 
     <input type="text" placeholder="Username" name="userid" size="50"> 
 
     </label> 
 
    </div> 
 
    <div class="pwd"> 
 
     <label> 
 
     <input type="password" placeholder="Password" name="pwd" size="50"> 
 
     </label> 
 
    </div> 
 
    <div class="email"> 
 
     <label> 
 
     <input type="email" placeholder="Email Address" name="email" size="50"> 
 
     </label> 
 
    </div> 
 
    <div class="btn"> 
 
     <button type="submit">Create Account</button> 
 
    </div> 
 
    </form> 
 
</div>

Answer 1

それはすべてのブラウザ間でCSSをリセットするためにnormalize.cssや他のCSSのリセットコード（eric meyer css resetはあまりにも非常に人気のある）のようなものを使用することは常に良い考えです。 「

それに付属している任意のブラウザでは、私はそれが100％のソリューションではありません推測

...パディングの、余白、幅、高さなどのデフォルト値をですが、それはふてくされてあなたのものに近い行くことができますされます再探しています。

Answer 2

相対位置と絶対位置にジャンプしないでください。あなたがこのすべてに慣れていないなら、それはポジショニング要素について考えるのが最も自然な方法だと理解できます。トップと左の位置を使用するだけです。しかし、これはあなたがウェブ上でそれを行うべきではありません！

以下は、私がどのようにそれを行うのか見つけることができます。

Matan G.は、CSSリセット/正規化がよく使用されることを指摘しています。私は自分自身もそうしています。しかし、あなたがそれを行う前に（あなたが新しいものだと考えると）私が投稿したコードを見て、それがあなたにとって意味をなさないかどうかを知ることが賢明でしょう。そうでない場合は、尋ねてください。 、見出し、段落、リストなどのアイテムをテキストに一定の幅を設定

• ：

  可能な場合、あなたがこれらの事を避けなければならないことに注意することが重要です。

• 相対/絶対配置を使用します。それらは非常に便利ですが、必要な場合にのみ必要です。
• 実際に必要なdivs /クラスが多すぎます。あなたのHTMLを混雑させないでください。

* {box-sizing: border-box;} 
 
ul { 
 
    background-color: #000000; 
 
} 
 
li a:hover { 
 
    background-color: #0cf72a; 
 
} 
 
.word-container { 
 
    width: 500px; 
 
    height: 50px; 
 
    margin: 80px auto auto; 
 
} 
 
.word-container h1 { 
 
    margin: 0; 
 
    text-align: center; 
 
    color: #ab0a0a; 
 
} 
 
.register-container { 
 
    width: 600px; 
 
    margin: 20px auto auto; 
 
    border: 1px solid #000; 
 
    padding: 20px; 
 
} 
 
label { 
 
    display: block; 
 
} 
 
.name::after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 
.name label:first-child { 
 
\t margin-right: 20px; 
 
} 
 
.name label { 
 
\t width: calc(100%/2 - 10px); 
 
\t float: left; 
 
} 
 
input, [type="submit"] { 
 
    padding: 8px; 
 
    margin-bottom: 20px; 
 
    width: 100%; 
 
} 
 
[type="submit"] { 
 
    border: 1px solid #000000; 
 
    color: #ffffff; 
 
    background-color: #ab0a0a; 
 
    margin: 0; 
 
} 
 
[type="submit"]:hover { 
 
    background-color: red; 
 
}

<div class="word-container"> 
 
    <h1>Create your account</h1> 
 
</div> 
 
<div class="register-container"> 
 
    <form action="" method="POST"> 
 
    <div class="name"> 
 
     <label> 
 
     <input type="text" placeholder="First Name" name="fname"> 
 
     </label> 
 
     <label> 
 
     <input type="text" placeholder="Last Name" name="lname"> 
 
     </label> 
 
    </div> 
 
     <label> 
 
     <input type="text" placeholder="Username" name="userid"> 
 
     </label> 
 
     <label> 
 
     <input type="password" placeholder="Password" name="pwd"> 
 
     </label> 
 
     <label> 
 
     <input type="email" placeholder="Email Address" name="email"> 
 
     </label> 
 
     <button type="submit">Create Account</button> 
 
    </form> 
 
</div>