输入不遵循line-height属性

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。当我说被迫时，它确实是被迫的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

不知道这是否是您想要的答案，但我认为这个结果很有趣。