safari 9.1上的密码输入字段显示错误

Question

密码类型的基本输入字段在safari 9.1

上显示严重

问题是野生动物园中的'钥匙'。这是我的HTML：

<div class="form-group">
     <input type="password" class="form-control" placeholder="Wachtwoord *" name="password" required="">
</div>

<div class="form-group">
     <input type="password" class="form-control" placeholder="Bevestig wachtwoord *" name="password_confirmation" required="">
</div>

铬：

Safari浏览器

设置height:100%';将解决问题，但这显然会改变字段的高度，这不是我想要的。

Css：

input[type="text"], input[type="email"], input[type="password"] {
    display: block;
    width: 100%;
    vertical-align: middle;
    border: 1px solid #cbcbcb;
    outline: 0;
    box-shadow: none;
    padding: 12px;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    -ms-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
}
.form-control {
    border: 1px solid #cbcbcb;
    border-radius: 0;
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

Answer 1

从输入对象中删除填充是解决方案。

input[type="password"] {
    padding: 12px;
}

Answer 2

我遇到了完全相同的问题，并搜索了一个解决方案的高低，最终结果就像：line-height: normal;

这对我来说似乎适用于浏览器..希望你得到相同的结果！