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

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

工作的是这个(删除了按钮):

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