CSS文本框失去了顶线

Question

我需要你帮助解释一下。我正在创建登录表单，但是当我收到验证错误时，我在html中的文本框[input type = text]中出现问题，其中文本框中的上面一行丢失了。请参阅附图。 enter image description here enter image description here

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
  background-color: #141517;
}

* {
  border-collapse: collapse;
}

h2 {
  text-align: center;
}

.container {
  width: 500px;
  height: 500px;
  margin: 50px auto;
  font-family: 'Droid Serif', serif;
  position: relative;
}

.row {
  width: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: arial;
  font-size: 13px;
  color: #4f4f4f;
  padding: 10px 55px 40px;
  background-color: #ffffff;
  border: 5px solid white;
  box-shadow: 0 4px 8px #000000;
  border-radius: 5px;
}

input[type=text],
[type=password] {
  width: 97%;
  height: 30px;
  padding-left: 5px;
  margin-bottom: 20px;
  margin-top: 8px;
  color: #4f4f4f;
  font-size: 16px;
}

#login {
  width: 100%;
  margin-top: 5px;
  padding: 5px;
  font-weight: bold;
  cursor: pointer;
}

#signup {
  width: 100%;
  margin-top: 5px;
  padding: 5px;
  font-weight: bold;
  cursor: pointer;
}

＆＃13;

<div class="container">
  <div class="row">
    <h2> Sign In </h1>

      <form action="p1.php" method="POST">
        <div>some validation error</div> Username: <br/>
        <input type="text" name="username" /> <br/> Password:
        <input type="password" name="password" /> <br/>
        <input type="submit" name="submit" id="login" />
      </form>

      <form action="register.php" method="POST">
        <input type="submit" name="register" value="Create New Account" id="signup" />
      </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题：

我假设你的验证器在你的标记中插入一个块级元素，如下所示：

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
  background-color: #141517;
}

* {
  border-collapse: collapse;
}

h2 {
  text-align: center;
}

.container {
  width: 500px;
  height: 500px;
  margin: 50px auto;
  font-family: 'Droid Serif', serif;
  position: relative;
}

.row {
  width: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: arial;
  font-size: 13px;  /* <-- here is the problem */
  color: #4f4f4f;
  padding: 10px 55px 40px;
  background-color: #ffffff;
  border: 5px solid white;
  box-shadow: 0 4px 8px #000000;
  border-radius: 5px;
}

input[type=text],
[type=password] {
  width: 97%;
  height: 30px;
  padding-left: 5px;
  margin-bottom: 20px;
  margin-top: 8px;
  color: #4f4f4f;
  font-size: 16px;
}

#login {
  width: 100%;
  margin-top: 5px;
  padding: 5px;
  font-weight: bold;
  cursor: pointer;
}

#signup {
  width: 100%;
  margin-top: 5px;
  padding: 5px;
  font-weight: bold;
  cursor: pointer;
}

＆＃13;

<div class="container">
  <div class="row">
    <h2> Sign In </h1>

      <form action="p1.php" method="POST">
        <div>some validation error</div> Username: <br/>
        <input type="text" name="username" /> <br/> Password:
        <input type="password" name="password" /> <br/>
        <input type="submit" name="submit" id="login" />
      </form>

      <form action="register.php" method="POST">
        <input type="submit" name="register" value="Create New Account" id="signup" />
      </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

出于某种原因，来自font-size: 13px;的{​​{1}}会导致带有.row的输入元素的上边框线被块级元素隐藏，这会继承这个较小的字体大小来自上面的font-size: 16px;。

解决方案：

从.row中删除常规字体大小定义，并将其应用于子元素（尤其是验证.row）。

＆＃13;

＆＃13;

div

＆＃13;

body {
  margin: 0;
  padding: 0;
  background-color: #141517;
}

* {
  border-collapse: collapse;
}

h2 {
  text-align: center;
}

.container {
  width: 500px;
  height: 500px;
  margin: 50px auto;
  font-family: 'Droid Serif', serif;
  position: relative;
}

.row {
  width: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: arial;
  /* font-size: 13px;  <-- here is the problem */
  color: #4f4f4f;
  padding: 10px 55px 40px;
  background-color: #ffffff;
  border: 5px solid white;
  box-shadow: 0 4px 8px #000000;
  border-radius: 5px;
}

input[type=text],
[type=password] {
  width: 97%;
  height: 30px;
  padding-left: 5px;
  margin-bottom: 20px;
  margin-top: 8px;
  color: #4f4f4f;
  font-size: 16px;
}

#login {
  width: 100%;
  margin-top: 5px;
  padding: 5px;
  font-weight: bold;
  cursor: pointer;
}

#signup {
  width: 100%;
  margin-top: 5px;
  padding: 5px;
  font-weight: bold;
  cursor: pointer;
}

＆＃13;

＆＃13;

＆＃13;