bug 回忆录（三）

@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。