el-table中使用show-overflow-tooltip属性,配合tooltip出现的浏览器兼容性问题

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

 <template slot-scope="scope">
       <el-tooltip placement="top">
             <div slot="content" class=“di'v”>
                    内容
               </div>
  </el-tooltip>
</template>
 
<template slot-scope="scope">后 需要在div 将内容显示tooltip上的标签设置overflow:hidden;text-overflow:ellipsis; 例如上述class名为div的元素
设置这些样式之后,谷歌上显示是正常的,但是火狐上显示会出问题 无法显示出tooltip

思路:

仔细查看渲染后的属性,对比两个浏览器显示的样式区别,谷歌内容显示层都被设定了display: block; 而火狐没有设定

解决方案

将其统一改为display: inline;火狐和IE可以正常显示tooltip

 

最新文章

  1. 解决JSP页面获取的数据库数据乱码问题
  2. CAShaperLayer的应用
  3. 压测 linux + jexus + mono + asp.net mvc
  4. JavaScript实例
  5. docker的四种网络模式
  6. Android 侧滑菜单的简单实现(SlidingMenu)
  7. Android开发学习
  8. html contenteditable
  9. NopCommerce 3.3中文语言包发布下载及使用
  10. 判断浏览器IE6
  11. java动手动脑课后思考题
  12. 监控利器 sysdig - 每天5分钟玩转 Docker 容器技术(79)
  13. Socket 通讯原理
  14. c/c++ 标准库 string
  15. Linux记录-sysctl.conf优化方案
  16. [ssh] 通过ssh私钥生成公钥的方法
  17. Django 模板继承
  18. 查看Windows系统里的进程已运行的时间
  19. 谈一谈HashMap类2
  20. 20155205 《Java程序设计》实验四 Android程序设计

热门文章

  1. 蓝桥杯训练赛二-1141 问题 C: C语言训练-百钱百鸡问题
  2. 【godis】skiplist
  3. 普通java项目打成jar包,引入第三方jar .
  4. python与java中符号表达式的区别
  5. ABAP 动态内表 实例展示以及代码Demo
  6. 钉钉-E应用开发初体验(企业内部应用)
  7. 集群笔记-fence
  8. 2022-04-20内部群每日三题-清辉PMP
  9. openpyxl-使用API总结
  10. 实验:STM32F103烧写支持Arduino