html – 输入不跟随line-height属性

我目前对line-height属性有问题.目前,我正在使用这个,以使文本出现在中间(〜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>

从代码片段可以看出,我正在使用定位和内嵌块元素来实现这种结果.

但是,那

<input type="submit"/>

似乎不符合line-height属性.

这是按设计,按钮不会改变它的线高度,即使它应该被覆盖？

我发现设置透明的背景似乎是“删除”这个限制 – 因此我的问题是：

工作演示：

.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;也将删除此行为 – 所以它建议这是默认的行为,您必须覆盖其他属性才能显示？

为什么设置背景颜色允许按钮使用此行高？为什么这不能自动工作？

解决方法

不知道这是否会回答你为什么会这样做的问题.

但经过一番快速的调查,我想出了一些结果.

首先,如果输入的类型为submit,则会获得-webkit-appearance：push-button.线高被迫正常.当我说强迫它真的被迫正常.

在计算得到的样式中：

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覆盖它,重要的是正常渲染.我甚至尝试用40px！重要.正常与font-size相关.所以我试图通过改变字体大小来覆盖,没有什么会发生.

现在,如果我们删除-webkit-appearance：按钮通过覆盖不会失去强制线高度：正常.

但是当您更改背景颜色时会发生什么？默认情况下,浏览器将-webkit-appearance与none不同,可以覆盖行高.

浏览器在按钮外观中强制使用行高.所以,让我们尝试一下按钮代码.

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

我们得到什么

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

结论：

-webkit-appearance：按钮使浏览器强制
line-height：normal.
-webkit-appearance：按钮允许编辑行高.
> background-color sets -webkit-appearance
没有

不知道这是否是你想要的答案,但是我觉得这个结果很有趣.

html – 输入不跟随line-height属性

解决方法

猜你在找的HTML相关文章