悬停/单击/jquery 事件上的字体呈现问题

Question

使用 bootstrap 3 构建一个移动站点，它使用了 collapse js 插件。

我的问题是，当您将鼠标悬停在折叠中的字体上时（值得注意的是，系统字体会发生这种情况，而不仅仅是网络字体问题，使用网络字体更容易显示）或单击字体外观的变化。部分字体被删除或大小发生变化。我不确定为什么会这样，我尝试了以下方法：

• -webkit-font-smoothing
• 文本渲染
• 添加固定的行高
• 背面可见度

但是，这些都不起作用。我的想法已经用完了，虽然很难在屏幕截图中显示，但在与网站交互时，它是 100% 的一个大而明显的问题。

我假设这与崩溃 jquery 有关，但我无法在 bootstrap repo、here 或一般的谷歌搜索中找到任何东西（很难搜索哈哈），所以任何帮助将不胜感激。我没有太多与字体相关的代码，但是：

  .panel-tap {
    position: relative;
    display: block;
    width: 100%;
    line-height: 1;
    font-size: 16px;
  }

面板有一些填充，但在动画过程中不会改变，也没有在动画过程中添加任何样式（仅添加类名来显示/隐藏下面的内容。

我无法发布该网站的链接，但希望这是足够的信息。 谢谢

编辑：值得注意的是，我已尝试删除与其关联的所有样式（即位置）并尝试添加特定样式以确保它不会在整个站点中被覆盖（即添加字体-权重、行高、边框等）

edit2：这不会一直发生，它会在几秒钟或几下点击后停止，完全不一致

edit3：禁用了折叠的动画/jquery 端，它仍然会这样做

Answer 1

一些想法：

• 您是否尝试将所有 CSS 动画属性设置为 0/none。它可能会从其他地方的父/坏选择器中获取一些东西。

• 仔细检查 :active 或 :focus 没有 CSS。或者可能是文本周围具有相对 font-size（em、% 等）的跨度

• 我记得遇到过类似问题，position:relative;。你能在文本周围加上span 并给它position:static;

• 是否有活动的类或可能导致问题的东西？

这就是我能想到的。但可能会有所帮助。