css - Bootstrap 输入组在 Safari 中显示错误

Question

开发一个网站，我遇到了以下问题:在登录面板中，输入组在 chrome 和其他浏览器(如 safari opera 等)中显示正确。但在 safari 中却没有。此处显示差异的图像。

Chrome :

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 上加载页面后，一切似乎都正常。所以错误应该在windows版的safari

Answer 1

你可以用 css 修复高度:

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

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

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