在不同的屏幕和设备上，按钮样式有所不同

Question

我正在尝试使用Bootstrap创建关闭按钮。问题在于按钮样式在不同大小上有所不同。例如，如果我将浏览器缩小为较小的手机尺寸或在实际设备上，则样式如下所示（这是错误的）：

但是它应该看起来像这样（只有在使用chrome开发人员工具的屏幕尺寸工具时才会这样做。

这是按钮：

<button type="button" class="close hide-filters btn" aria-label="Close">
    <span class="close-icon" ><i class="fa fa-times" style="color: #999; font-size: 16px;"></i></span>
</button>

什么可能导致此问题？为什么用户代理样式表会覆盖它？而且只有在手动缩小和在实际设备上缩小时，按钮样式才会更加不同。

Answer 1

这是起作用的（已删除button）：

<span class="close-icon close hide-filters btn"><i class="fa fa-times" style="color: #999; font-size: 16px;"></i></span>