html - 输入不遵循行高属性

Question

我目前遇到了 line-height 属性的问题。目前，我正在使用它来使文​​本显示在下方中间(~ div 下方的 2/3)。

.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>

正如您从代码片段中看到的那样，我使用定位和 inline-block 元素来实现这种结果。

但是，

<input type="submit"/> 

似乎不遵守行高属性。

这是设计使然按钮不会改变它的行高，即使它应该被覆盖吗？

---

我发现将 background 设置为 transparent 似乎可以“消除”此限制 - 因此我的问题是:

工作演示:

.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;
    background:transparent;
}

<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>

---

还注意到设置 -webkit-appearance: none; 也会删除此行为 - 所以这表明这是默认行为，您必须覆盖其他属性才能这要显示？

---

为什么设置一个背景色就可以让按钮使用这个行高？为什么这不能自动工作？

Answer 1

不确定这是否会回答您关于为什么会发生的问题。

但经过一些快速调查后，我得出了一些结果。

首先，如果输入的类型为 submit，它会获得 -webkit-appearance: push-button。并且 line-height 被强制为 normal。当我说 forced 时，它实际上是被迫 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 来覆盖它，但什么也没有发生。

现在，如果我们通过用 none 覆盖来移除 -webkit-appearance: push-button，它将失去强制的 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 让浏览器强制
  行高:正常。
• -webkit-appearance: button 允许编辑 line-height。
• background-color 设置-webkit-appearance为无

不知道是不是你想要的答案，但我觉得这个结果很有意思。