Html 按钮中的引导图示符图标与mobile和internet explorer中的假定行为不符

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

在这个按钮中，我放置了一个引导图标：

<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 30全屏：

Firefox 30缩小宽度：

IE10全屏：

IE10宽度减小（此处有问题）：

---

您可以在此地址查看网站（减少菜单以查看我正在谈论的按钮）：（在给出答案后删除）

我不确定它是否会工作（没有可用的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>

---

使用chrome或firefox中inspect element选项卡中的“box model”视图可以看到问题

图标跨距的宽度大于按钮的内部宽度。这是因为按钮设置为80%宽度，因此由于填充（总共24px），它在内部变得非常小。当这种情况发生时，字形图标在按钮内部的“开始”处“开始”，但由于按钮太小，它溢出到按钮的填充中，从而使其看起来错误

一个简单的修复方法是在按钮上添加一行css

min-width: 38px;

<button class="toggle-slide-left btn btn-custom btn-custom-cat" style="padding: 0; min-width: 20px;">
    <span class="glyphicon glyphicon-chevron-right"></span>
</button>

这将确保按钮内始终有空间放置glyphicon

编辑

要确保按钮不会溢出到文本中，请确保文本不会变得足够大而无法显示。将

.container margin

css样式更改为此

.container-margin {
    max-width: calc(100% - 50px);
    margin-right:5%;
}

这样，对于按钮而言，文本永远不会太宽

min-width: 38px;

<button class="toggle-slide-left btn btn-custom btn-custom-cat" style="padding: 0; min-width: 20px;">
    <span class="glyphicon glyphicon-chevron-right"></span>
</button>

---

这对我很有效。如果要保持原始的

top

和

bottom

填充，只需使用

padding left:0；右填充：0

而不是

填充：0

尝试在span中添加

clearfix

类。

事实上，在我的模板中已经是这样了。我在这里发布时更改了它，这样更容易阅读。谢谢你的回答，但是没有解决我的问题：）在你发布的代码中，不是这样的。您已经将span放在单独的行上，在按钮和span标记之间引入了newspace。你确定你尝试了我的建议吗？你能在JSFIDLE中提供你的代码吗？你能提供JSFIDLE的codepen演示吗？你的IE版本是什么？手机：你的浏览器是什么？你能分享一个bootply.com链接吗？用截图+网站地址编辑我与他们没有任何关系，但可能会为你省去很多麻烦，这是对图标的巨大改进。更好的是，不需要JavaScript，它们的工作方式与glyphicons HTML-wise相同。在Firefox中，按钮的宽度可以减小到38px以下，但glyphicon仍保持居中。我想在任何浏览器中重现这一点。固定最小宽度的问题在于它会溢出到其他容器中（例如“sallt”一词），我希望避免这种情况（并保持80%的比率）。这就是firefox（gecko）对跨距溢出到按钮中的解释。Chrome也有“按钮太小”的问题，我暂时保留这个问题，看看是否有办法在溢出时迫使浏览器居中。也许我应该自定义glyphicon以删除左右两侧的“空白”？我只是编辑了我的答案来处理溢出到其他容器中的问题，这些容器不适用于所有宽度（最小宽度不会溢出，但动态调整大小（在最小宽度和最大宽度之间）溢出）。我将尝试制作一个JSFIDLE，这样您就更容易尝试了。我们离这里越来越近了。只需要在这个按钮的顶部添加一个最小宽度，它将防止按钮小于glyphicon（以前是自动的）。只要在你答案上的按钮样式上加上最小宽度：20px，我就接受了。非常感谢。