引导输入组在 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），但没有任何改变，所以我认为它一定与引导程序有关。有人知道这个问题的解决方案吗？

编辑：

我尝试在另一台 Windows 电脑上加载 Safari 上的页面，但错误仍然相同。在我尝试在 Mac 上加载 Safari 上的页面后，一切似乎都很好。所以错误应该是在windows版本的safari中

Answer 1

你可以用 css 固定高度：

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

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

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