internet-explorer - 字体行高IE浏览器兼容性问题

Question

下面的 CSS 代码在 IE 11 版本的浏览器中有问题，行高应该是 36px，我漏掉了什么？

这是问题的截图

它在chrome中显示正常。

input {
	display:block;
	width:100%;
	background:#fbfbfb;
	color:#666;
	font-size:.875rem;
	line-height:2;
	box-sizing:border-box;
	border:solid .0625rem #ccc;
	padding:.1875rem .5rem;
	margin-bottom:.875rem;
}

<form action="demo_form.asp">
    First name: <input type="text" name="fname" placeholder="First">
    Last name: <input type="text" name="lname" placeholder="Last">
    <input type="submit" value="Submit">
</form>

标签： internet-explorerinput

Answer 1

尝试为输入文本元素添加高度属性。

代码如下：

<style>
    input {
        display: block;
        width: 100%;
        background: #fbfbfb;
        color: #666;
        font-size: .875rem;
        line-height: 2;
        box-sizing: border-box;
        border: solid .0625rem #ccc;
        padding: .1875rem .5rem;
        margin-bottom: .875rem;
        height:2.2rem;  /*height:36px;*/ /*You could also set the height property to 36px*/    
    }
</style>

在 IE 浏览器（IE 11 版本）中的结果如下：