Bootstrap输入组在Safari中显示错误

Question

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

铬：

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相关的东西。任何人都知道这个问题的解决方案吗？

修改

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

Answer 1

您可以使用css修复高度：

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

如果您在使用自定义样式之前导入bootstrap css！重要的是重写高度

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