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

我正在尝试使用引导创建关闭按钮。问题是按钮样式因尺寸不同而不同。例如,如果我将浏览器缩小为手机大小或在真实设备上,则样式如下(这是错误的):

但它应该是这样的(只有在使用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>

什么会导致这个问题?为什么用户代理样式表会覆盖它?只有在手动和真实设备上收缩时,按钮样式才会更加不同。