如何防止鞋带齿尖脱落？

Question

如下图所示，引导带齿尖会随机分崩离析，将它的箭头与身体分开：

​

​

我使用本网页在多个浏览器上测试了这一点，这种行为可以随机地看到，但仍在发生：

关于Firefox51.0.1的工具提示：

​

​

Microsoft上的工具提示38.14393.0.0:

​

关于GoogleChrome56.0.2924.87(64位)的工具提示：

​

如何避免这种情况的发生？

PS:我认为这是一个渲染的问题，一些关于身体的东西就在箭头后面，实际上不是混叠，而是接近它。也许让箭头与身体相交会解决这个问题，但是如果有一个来自Bootstrap团队的解决方案或者其他一些不会让我搞砸工具提示模板的配置，我会更愿意这样做的。

Answer 1

当缩放不是100%时，通常会像其他类似的东西一样崩溃，这很可能是由于舍入误差造成的。我过去修复这个问题的唯一方法是失去一个像素，然后这个半像素的四舍五入到一个完整的像素就不会显示，至少如果页面没有缩放。

Demo：https://jsbin.com/sihafu/edit?html,css,js,output

我用html作为特异性来避免！重要。您可以使用工具提示所在位置的父类。

html .tooltip.left .tooltip-arrow {
  right: 1px;
}

html .tooltip.top .tooltip-arrow {
  bottom: 1px;
}

html .tooltip.bottom .tooltip-arrow {
  top: 1px;
}

html .tooltip.right .tooltip-arrow {
  left: 1px;
}