css - 输入框样式无法正常工作

Question

我已将注册表单居中。我还创建了一个标签并使用了一个显示 block 。但是，我的输入框没有在顶部显示该行。为什么它不能正常工作，即使我没有设置我的行类的高度？我希望它根据我的行类的内容自动变大。请看我的图片:

* {
  margin: 0;
  padding: 0;
}

body {
  width: auto;
  font-family: "Gidole", sans-serif;
}

h1{
  padding: 15px;
  text-align: center;
}


@font-face {
  font-family: "Gidole";
  src: url(CODE Light.otf);
}


.container {
  width: 960px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background: red;
  top: 50px
}

.row {
  width: 320px;
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  color: #191919; 
  background-color: #F2FFFA;	
  font-family: "Gidole", sans-serif;
  padding: 10px 55px 40px;	

}

label {
  max-width:300px;
  display: block;
  text-align:left;
}

input {
  width: 100%;
}

#submit {
  display: block;
  width: 100%;
  padding: 5px 10px 5px 10px;
  color: #ffffff;
  background-color: #B73737;;
}

select {
  width: 100%;
}

<div class="container">
  <div class="row">

    <div class="myForm">
      <form action="register.php" method="POST">
        <h1> Create an account</h1> <br/>
        <?php echo registration_error($errors1); ?>
        <label for="">Username</label><input type="text" name="username" size="30" /> <br/><br/>
        <label for="">Password</label><input type="password" name="password"  size="30"/> <br/><br/>
        <label for="">First Name</label><input type="text" name="firstName" size="30" /> <br/><br/>
        <label for="">Last Name</label><input type="text" name="lastName" size="30"> <br/><br/>
        <label for="">Email address</label><input type="text" name="email" size="30"> <br/><br/>
        <label for="">Gender</label><select name="gender" id="gender" >
          <option value="male"> Male </option>
          <option value="female"> Female </option>
          <option value="others"> Others </option>
          <option value="others"> Prefer not to say </option>
        </select> <br/><br/>
          <label for="">Age</label><input type="number" name="age"> <br/><br/>
        <div class="center">
          <input type="submit" name="submit" value="Register" id="submit">
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

这就是原因，您应该更喜欢使用 CSS Reset。因为，您的代码在 IE 中运行完美。

代码的 box-sizing 属性设置为 Browser Default 即 box-sizing:content-box;。因此，由于 borders

占用的大小， top-border 被隐藏了

最佳做法是使用 CSS Reset 或 Normalizer.css

添加 box-sizing: border-box; 修复您的代码。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* try commenting this property */
}

body {
  width: 100%;
  font-family: "Gidole", sans-serif;
}

h1 {
  padding: 15px;
  text-align: center;
}

.container {
  width: 960px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background: red;
  top: 50px
}

.row {
  width: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #191919;
  background-color: #F2FFFA;
  font-family: "Gidole", sans-serif;
  padding: 10px 55px 40px;
}

label {
  max-width: 300px;
  display: block;
  text-align: left;
}

input {
  width: 100%;
}

#submit {
  display: block;
  width: 100%;
  padding: 5px 10px 5px 10px;
  color: #ffffff;
  background-color: #B73737;
  ;
}

select {
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="myForm">
      <form action="register.php" method="POST">
        <h1> Create an account</h1> <br/>
        <?php echo registration_error($errors1); ?>
        <label for="">Username</label><input type="text" name="username" size="30" /> <br/><br/>
        <label for="">Password</label><input type="password" name="password" size="30" /> <br/><br/>
        <label for="">First Name</label><input type="text" name="firstName" size="30" /> <br/><br/>
        <label for="">Last Name</label><input type="text" name="lastName" size="30"> <br/><br/>
        <label for="">Email address</label><input type="text" name="email" size="30"> <br/><br/>
        <label for="">Gender</label><select name="gender" id="gender">
                    <option value="male"> Male </option>
                    <option value="female"> Female </option>
                    <option value="others"> Others </option>
                    <option value="others"> Prefer not to say </option>
                </select> <br/><br/>
        <label for="">Age</label><input type="number" name="age"> <br/><br/>
        <div class="center">
          <input type="submit" name="submit" value="Register" id="submit">
        </div>
      </form>
    </div>
  </div>
</div>