@author Ken @time 2020-09-25 21:23:26 @description 转载请备注出处，谢谢

bug 回忆录（三）

大家好，我是 Ken，人贱人爱的前端小 Ken，我的公众号是 前端小Ken，今天我要告诉你一个严重的问题，我发现这个奇怪的 bug，内心一万个草泥马在空中飘过，顿时心里害怕，菊花一紧：

最后我还是怂了，不得不好好认真的对待 bug。

每天一个 bug，真是应验了那句，bug 虐我千万遍，我待 bug 如初恋。

问题是这样的：今天我在检查线路，单项，产品时，更新入口代码之后，表格的样式蹦了，产品标签被挡住了，表格单元格对不齐了，效果如下：

看到这种情况，心态爆炸啊，总是莫名其妙的出现这种未知的 bug，我不行了，快扶我去钓鱼。

这一看肯定是谁改了样式的，顿时按下 F12，一顿暴揍，发现是以下这段样式代码产生的影响：

是为了解决火狐浏览器 show-overflow-tooltip 属性不生效的代码，el-table 使用模板插槽无法显示 tooltip 以及 text-overflow:ellipsis 在火狐显示的问题。

el-table 中使用 show-overflow-tooltip 属性内容过长被隐藏时显示 tooltip，使用了作用域插槽的模板那么 show-overflow-tooltip 设置的显示 tooltip 内容只作用到下一级的 div 内容。

<template slot-scope="scope"> 后需要在将内容显示 tooltip 上的标签设置 overflow:hidden;text-overflow:ellipsis; 做内容标签上设置这些样式之后谷歌上显示是正常的但是火狐上显示会出问题无法显示出 tooltip 查看渲染后的属性发现内容显示层都被设定了display: block; 将其改为 display: inline; 火狐可以正常显示 tooltip。