我目前对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
没有
不知道这是否是你想要的答案,但是我觉得这个结果很有趣.
