关于table的一些兼容性问题
来源:互联网 更新时间:2026-06-12 07:21
不多说，先来看两个日常开发中经常会遇到的表格兼容问题。效果虽然简单，但浏览器之间的差异有时候真能让人挠头——尤其是当你以为现代浏览器都统一了，结果老IE和火狐又给你来点“惊喜”。
兼容拼比一：普通边线效果
图一：谷歌、火狐、IE8 下的表现
图二：IE6/7 下的表现
注意看，IE6 和 IE7 压根就不认识 图一：谷歌、IE 下的表现 图二：火狐下的表现 正常情况下，鼠标经过最后一个 有两种解决方案： 背后的原因其实不复杂：在火狐中， 《Off Campus》第二季官宣：这对CP还在，但不再是主角 和平精英如何做到压枪稳-和平精英怎样才能压枪稳 客单价碾压宝马奥迪！极氪5月交付新车34377辆：连续4个月双增长 免费影视剧APP推荐 HBO 奇幻剧《龙之家族》第三季定档 6 月 22 日，最终预告片曝光喉道海战 DOTA2 TI时隔七年重返上海！门票6月10日开抢，国服享受优先购买！ 网络热词聊污是什么意思 帅气继父网名女生可爱英文(精选100个) 抖音最火沙雕男生网名(精选100个) 蒙古上单是什么梗 免费看电影的软件推荐 韦一敏是什么梗 金铲铲之战s17六暗星卡莎阵容玩法构筑指南 SpaceX狂揽AI人才，马斯克亲自面试且不看简历背景 作家助手如何上传自制封面 作家助手如何设置小说的封面 阿里发布Qwen3.7-Max大模型，全球第五、国产第一 有寓意的易经网名男生(精选100个) 韩漫小少爷网名大全女生(精选100个) 美国市场：股票相对债券的风险溢价正在消失 动漫《情色漫画老师OVA》剧情介绍
手机号码测吉凶
的边框线。所以平时做项目时，我们通常会直接给 来设置边框线。要想实现图一那种效果，一个很实用的办法是：给 设置上边框和右边框，然后给
设置左边框和下边框。这样一套组合拳下来，各浏览器都能乖乖听话。
兼容拼比二：表格里面的隐藏弹框
时，会弹出一个包含“参加、不参加、未确认”的选项框。实现思路很简单：给 设置相对定位，里面的弹框用绝对定位。谷歌和IE下都显示正常，但是——火狐就出问题了。不管你鼠标经过哪个 ，那个弹框都会跑到最上面去，而且定位是相对于整个 来的。这就很诡异了，连一向傲娇的IE都低头了，平时温顺的火狐反倒不支持？
方案一：
里面再套一层 方案二：
设置相对定位，但在火狐下需要额外加一句 display: block !important;。加上之后，显示就恢复正常了。
position: relative必须配合display: block或display: inline-block才能生效。而在IE中，position: relative除了能和display: block、display: inline-block配合外，遇到display: table或display: table-cell也同样有效。这就是差异所在。如果你也在项目里踩过类似的坑，希望这两个案例能帮你省点排查时间。
本站所有软件，都由网友上传，如有侵犯你的版权，请发邮件haolingcc@hotmail.com 联系删除。 版权所有 Copyright@2012-2013 haoling.cc
