Вход не соответствует свойству высоты строки

В настоящее время у меня проблема с свойством line-height. В настоящее время я использую это, чтобы текст ниже отображался в середине (~ 2/3 пути вниз по div).

.squ {
  height: 30vw;
  width: 40vw;
  background: gray;
  display: inline-block;
  margin: 5px;
  position: relative;
}
.jbcol3 {
  text-align: center;
  height: auto;
}
.squ input,
.squ a {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  line-height: 40vw;
}
<div class="jbcol3">
  <!--Start Grey Box-->
  <br />
  <h3>Account Actions</h3>

  <div id="">
    <p class="squ">
      <input type="submit" value="Make Payment" id="" />
    </p>
  </div>
  <p class="squ">
    <input type="submit" value="Get Quote" id="" />
  </p>
  <p class="squ"> <a id="" href="orderhistory.aspx">Order history</a>
  </p>
  <p class="squ"> <a id="" href="changepassword.aspx">Change password</a>
  </p>
</div>

Ответы

Ответ 1

Не уверен, что это ответит на ваш вопрос о том, почему это происходит.

Но после небольшого и быстрого расследования я придумал некоторые результаты.

Во-первых, если вход имеет тип submit, он получает -webkit-appearance: push-button. И line-height принудительно normal. И когда я говорю, он заставил его действительно заставлять normal.

В вычисленных стилях вы получите:

line-height: normal;
.squ button, .squ input, .squ a - 40vw!important
input[type="submit"] - 40vw!important
input, textarea, keygen, select, button - normal user agent stylesheet

Даже если я перезаписываю его с помощью 40vw!important, он отображается как normal. Я даже пытался с помощью 40px!important. normal связан с font-size.., поэтому я попытался покрыть это, изменив font-size, и ничего не произойдет.

Теперь, если мы удалим -webkit-appearance: push-button путем перезаписи с помощью none, он теряет принудительный line-height: normal.

Но что происходит, когда вы меняете background-color? Браузер по умолчанию помещает -webkit-appearance с помощью none, чтобы вы могли перезаписать line-height.

line-height вызывается браузером в виде push-button. Итак, давайте попробуем это с тегом button.

<button type="submit">Make Payment</button>

Что мы получим?

-webkit-appearance: button;
line-height: 334.799987792969px;

Выводы:

  • -webkit-appearance: push-button делает браузер принудительным line-height: normal.
  • -webkit-appearance: button позволяет редактировать line-height.
  • background-color устанавливает -webkit-appearance до none

Не знаю, был ли это ответ, который вы хотели, но я думаю, что эти результаты весьма интересны.