Question

我目前遇到line-height属性的问题。目前，我正在使用它来使文本显示在下方中间（距离div的约2/3）。

＆＃13;

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

＆＃13;

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

＆＃13;

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

然而，

<input type="submit"/>

似乎没有遵守行高属性。

设计是否按钮不会改变其线高，即使它应该被覆盖？

我发现将background设置为transparent似乎可以删除＆＃39;这个限制 - 因此我的问题：

工作演示：

＆＃13;

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

＆＃13;

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

＆＃13;

还注意到设置-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

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

输入不遵循line-height属性

1 个答案: