使用 CSS 成行显示工具提示

Question

我正在开发一个带有工具提示功能的粘性侧栏菜单。 在 Chrome 和 Safari 中，它可以正确呈现，但是，工具提示在 IE 中偏离中心。

这是似乎导致问题的代码：

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after, {
   margin-left: 0;
   margin-bottom: 0;
}

以上在 Chrome 和 Safari 中呈现良好，但在 IE 中则不然。 只有当我像这样声明它时，它才能在 IE 中工作

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after, {
  margin-left: 0;
  margin-bottom: -16px; /* different */
}

任何人都可以就如何正确编码提供任何建议，也许使用display: inline-block ？

这是完整的 Fiidle： https ://jsfiddle.net/gavinfriel/jxg4th86/3/

Answer 1

设置bottom:0而不是bottom:50% （或替换为top:0 ）为我解决了所有浏览器中的问题。 试一试，看看结果是否是你想要的？