Bootstrap输入组在Safari中显示错误

Question

开发一个网站,我遇到了以下问题:在登录面板中,输入组在chrome和其他浏览器中正确显示,如safari opera等..但不在safari中.这里显示了差异的图像.

铬:

苹果浏览器:

这里还有html代码:

                <label for="username">Username</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-addon"><span class="glyphicon glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control" name="username" required="required"> 
                </div>

                <label for="password">Password:</label>
                <div class="input-group input-group-sm">
                    <span class="input-group-addon"><span class="glyphicon glyphicon glyphicon-lock"></span></span>
                    <input type="password" class="form-control" name="password" required="required"> 
                </div>

我已经尝试删除我创建的css文件(style.css),但没有任何改变,所以我认为它必须是与bootstrap相关的东西.有谁知道这个问题的解决方案？

编辑:

我试图在另一台Windows PC上加载Safari页面,错误仍然是一样的.在我尝试在Mac上的safari上加载页面后,一切似乎都没问题.因此错误应该在Safari版本的Windows版本中

Answer 1

您可以使用 css 修复高度：

.input-group-sm>.input-group-addon {
    height: 18px;
}

如果您在自定义样式之前导入 bootstrap css，请使用 !important 重写高度

.input-group-sm>.input-group-addon {
    height: 18px !important;
}