element的el-table使用模板插槽在火狐和IE无法显示tooltip(浏览器兼容)
2024-09-07 03:32:30
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
最新文章
- 解决JSP页面获取的数据库数据乱码问题
- CAShaperLayer的应用
- 压测 linux + jexus + mono + asp.net mvc
- JavaScript实例
- docker的四种网络模式
- Android 侧滑菜单的简单实现(SlidingMenu)
- Android开发学习
- html contenteditable
- NopCommerce 3.3中文语言包发布下载及使用
- 判断浏览器IE6
- java动手动脑课后思考题
- 监控利器 sysdig - 每天5分钟玩转 Docker 容器技术(79)
- Socket 通讯原理
- c/c++ 标准库 string
- Linux记录-sysctl.conf优化方案
- [ssh] 通过ssh私钥生成公钥的方法
- Django 模板继承
- 查看Windows系统里的进程已运行的时间
- 谈一谈HashMap类2
- 20155205 《Java程序设计》实验四 Android程序设计