html - 按钮中的 Bootstrap 字形图标在移动设备和 Internet Explorer 中的行为不像预期的那样

Question

在我的模板中，当用户向下滚动时，我有一个导航按钮位于页面的左侧，单击时会触发一个菜单。

在这个按钮中，我放了一个 bootstrap 字形:

<div class="nav" id="sidebar">
    <button class="toggle-slide-left btn btn-custom btn-cutsom-cat">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </button>
</div>

当页面在桌面上(高分辨率)和在 Firefox 上缩小时，字形很好地水平居中。但是在移动设备或 Internet Explorer 上，当页面变小(按钮也是如此)时，字形图标会停留在按钮的右侧，就像有某种 padding-left 一样。

我试着把 pading-left: 0px; padding-right: 0px; 在按钮的 CSS 中，但它会在降低分辨率时使字形溢出。

这是我的 CSS:

.btn-custom-cat{
    height: 30px;
    width: 80%;
    margin-left: 5%;
    text-align: center;
}
#sidebar.affix-top {
  position: fixed;
  margin-top: 10px;
  width: 5%;
} 
#sidebar.affix {
  position: fixed;
  top: 60px;
  width: 5%;
}

Firefox 30 全屏:

Firefox 30 缩小宽度:

IE10 全屏:

IE10 缩小宽度(这里有问题):

您可以在这个地址看到该网站(缩小菜单以查看我正在谈论的按钮):(给出答案后删除)

Answer 1

我不确定它是否有效(没有 IE 可用的 atm)，但您可以尝试删除按钮内的空格吗？所以你会得到

<div class="nav" id="sidebar">
    <button class="toggle-slide-left btn btn-custom btn-cutsom-cat"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>