表单初始化时输入字段中的文本较小，为什么？答案

【问题标题】：Text in input field is smaller on form initialization, why?表单初始化时输入字段中的文本较小，为什么？
【发布时间】：2022-02-10 04:47:37
【问题描述】：

当我打开我的网站时，输入字段已填满，但输入字段中的文本很小。如果我单击页面上的某个位置，则它会更大。我不知道发生了什么，输入字段中的文本应始终为 17px。我正在使用引导程序 v3.3.6。这是我的html：

.form-bg {
  background: #00b4ef;
}

.form-horizontal {
  background: #fff;
  padding-bottom: 40px;
  border-radius: 15px;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 100px;
}

.form-horizontal .heading {
  display: block;
  font-size: 35px;
  font-weight: 700;
  padding: 35px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 30px;
}

.form-horizontal .form-group {
  padding: 0 40px;
  margin: 0 0 25px 0;
  position: relative;
}

.form-horizontal .form-control {
  background: #f0f0f0;
  border: none;
  border-radius: 20px;
  box-shadow: none;
  padding: 0 20px 0 45px;
  height: 40px;
  transition: all 0.3s ease 0s;
  font-size: 17px;
}

<body>
  <div class="container body-content">

    <div class="form-bg">
      <div class="container">
        <div class="row">
          <div class="col-md-offset-3 col-md-6">


            <form method="post" class="form-horizontal" novalidate="novalidate">
              <span class="heading">Logowanie</span>

              <div class="form-group">
                <input class="form-control valid" placeholder="Email" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Input_Email" name="Input.Email" value="" aria-describedby="Input_Email-error"
                  aria-invalid="false">
                <i class="fa fa-user"></i>
                <span class="text-danger field-validation-valid" data-valmsg-for="Input.Email" data-valmsg-replace="true"></span>
              </div>
            </form>

          </div>
        </div>
      </div>
    </div>

  </div>
</body>

【问题讨论】：

我正在努力复制这个问题。你在哪些浏览器中测试过这个？
谢谢，我想我有类似这样的问题：stackoverflow.com/questions/57979937/… 并且这个是和chrome相关的，我会忽略这个问题

标签： css twitter-bootstrap

【解决方案1】：

其他地方有问题，它按照您发布的方式正常工作。运行下面的sn-p。确保没有具有不同字体大小的 :focus 类。

    .form-bg {
        background: #00b4ef;
    }

    .form-horizontal {
        background: #fff;
        padding-bottom: 40px;
        border-radius: 15px;
        text-align: center;
        margin-top: 100px;
        margin-bottom: 100px;
    }

    .form-horizontal .heading {
        display: block;
        font-size: 35px;
        font-weight: 700;
        padding: 35px 0;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 30px;
    }

    .form-horizontal .form-group {
        padding: 0 40px;
        margin: 0 0 25px 0;
        position: relative;
    }

    .form-horizontal .form-control {
        background: #f0f0f0;
        border: none;
        border-radius: 20px;
        box-shadow: none;
        padding: 0 20px 0 45px;
        height: 40px;
        transition: all 0.3s ease 0s;
        font-size: 17px;
    }

    <body>
        <div class="container body-content">        

            <div class="form-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-md-offset-3 col-md-6">


                            <form method="post" class="form-horizontal" novalidate="novalidate">
                                <span class="heading">Logowanie</span>
                                
                                <div class="form-group">
                                    <input class="form-control valid" placeholder="Email" type="email" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="Input_Email" name="Input.Email" value="" aria-describedby="Input_Email-error" aria-invalid="false">
                                    <i class="fa fa-user"></i>
                                    <span class="text-danger field-validation-valid" data-valmsg-for="Input.Email" data-valmsg-replace="true"></span>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </body>

【讨论】：

谢谢，我想我有类似这样的问题：stackoverflow.com/questions/57979937/… 并且这个和chrome有关，我会忽略这个问题