最新
文章专题
视频专题
问答1
问答10
问答100
问答1000
问答2000
关键字专题1
关键字专题50
关键字专题500
关键字专题1500
TAG最新
视频文章
推荐1
推荐3
推荐5
推荐7
推荐9
推荐11
推荐13
推荐15
推荐17
推荐19
推荐21
推荐23
推荐25
推荐27
推荐29
推荐31
推荐33
推荐35
推荐37
视频文章20
视频文章30
视频文章40
视频文章50
视频文章60
视频文章70
视频文章80
视频文章90
视频文章100
视频文章120
视频文章140
视频2
关键字专题
关键字专题
tag2
tag3
文章专题
文章专题2
文章索引1
文章索引2
文章索引3
文章索引4
文章索引5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
文章专题3
科技
教育
生活
旅游
时尚
美容
美食
健康
体育
游戏
汽车
元宇宙
家电
财经
百科
科技
首页
业界
互联网
手机
AI
VR
电商
苹果
安卓
6G
5G
数码
测评
学院
鸿蒙
软件
电脑
知识百科
专题
点击下载
本文文档
当前位置：
首页
-
科技
-
知识百科
-
正文
firefox下rowspan+border+border-collapse的bug_经验交流
来源：懂视网
责编：小采
时间：2020-11-27 18:55:40
firefox下rowspan+border+border-collapse的bug_经验交流
firefox下rowspan+border+border-collapse的bug_经验交流:后查具体情况概述为：firefox+table rowspan+border+border-collapse:collapse; 表现情况是：第一行与最后一行正常，其余的中间行，全部都与预期的border不同。 先看示例吧： Rank's HTML document * {font-
推荐度：
点击下载本文
文档为doc格式
导读
firefox下rowspan+border+border-collapse的bug_经验交流:后查具体情况概述为：firefox+table rowspan+border+border-collapse:collapse; 表现情况是：第一行与最后一行正常，其余的中间行，全部都与预期的border不同。 先看示例吧： Rank's HTML document * {font-
后查具体情况概述为：firefox+table rowspan+border+border-collapse:collapse;
表现情况是：第一行与最后一行正常，其余的中间行，全部都与预期的border不同。
先看示例吧：
<html> <head> <title>Rank's HTML document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <meta http-equiv="ImageToolbar" content="no"> <meta http-equiv="Creator.name" content="rank"> <style type="text/css" title="default" media="screen"></style> </head> <body> <style> * {font-size:15px;text-decoration:none;} td {border-top:1px solid #000} </style> <table width="50%" border="0" style="border:1px solid #000;border-collapse:collapse;width:100%;"> <tr> <th width="49%">第一列</th> <th width="50%">第二列</th> </tr> <tr class=""> <td> test </td> <td rowspan="2">第一条中间没有横线 </td> </tr> <tr class=""> <td>test</td> </tr> <tr class="zebra"> <td> test </td> <td rowspan="2">可爱的firefox让我们看到了两条线 </td> </tr> <tr class="zebra"> <td>test</td> </tr> <tr class=""> <td> test </td> <td rowspan="2">可爱的firefox让我们看到了两条线 </td> </tr> <tr class=""> <td>test</td> </tr> <tr class="zebra"> <td> test </td> <td rowspan="2">可爱的firefox让我们看到了两条线 </td> </tr> <tr class="zebra"> <td>test</td> </tr> <tr class=""> <td> test </td> <td rowspan="2">最后一条中间没有横线 </td> </tr> <tr class=""> <td>test</td> </tr> </table> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
经过验证，两种解决方法。
去除border-collapse
加上一个border-left或者border-right
无独有偶，后来搜索了一下，也有前人踩到了这个坑里，它的解决方法也是：border-left:1px solid #999 important;border-left:none的方法来解决。
(see detail:http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_23698654.html)
好在可以通过border的错觉及颜色来解决这个问题。为了偷懒，我直接用上了对方的e.g。看解决前的代码：
<html> <head> <style type="text/css"> table { border-collapse:collapse; } th, td { border: 1px black solid; } th { background-color: #A9AE7B; } td.right_user_img { border-left:none; background-color: #999999; text-align: center; padding: 15px; } td.left_user_img { border-right: none; background-color: #CCCCCC; text-align: center; padding: 15px; } td.left_image_join { background-color: #CCCCCC; border-left: none; } td.right_image_join { background-color: #999999; border-right: none; } img { border: none; } </style> </head> <body> <table cellspacing="0px" cellpadding="5px"> <thead> <tr> <th></th> <th>Image</th> <th>Insert Heading Here</th> <th>Image</th> </tr> </thead> <tbody> <tr> <th>1</th> <td rowspan="2" class="left_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> </tr> <tr> <th>2</th> <td class="right_image_join">Data</td> </tr> <tr> <th>3</th> <td rowspan="2" class="left_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> </tr> <tr> <th>4</th> <td class="right_image_join">Data</td> </tr> <tr> <th>5</th> <td rowspan="2" class="left_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> </tr> <tr> <th>6</th> <td class="right_image_join">Data</td> </tr> <tr> <th>7</th> <td rowspan="2" class="left_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> </tr> <tr> <th>8</th> <td class="right_image_join">Data</td> </tr> <tr> <th>9</th> <td rowspan="2" class="left_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> </tr> <tr> <th>10</th> <td class="right_image_join">Data</td> </tr> </tbody> </table> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
解决后的代码：
<html> <head> <style type="text/css"> table { border-collapse:collapse; } th, td { border: 1px black solid; } th { background-color: #A9AE7B; } td.right_user_img { border-left:1px solid #999999 !important; /*this solves border-collapse/rowspan bug in firefox 3 */ border-left:none; background-color: #999999; text-align: center; padding: 15px; } td.left_user_img { border-right: none; background-color: #CCCCCC; text-align: center; padding: 15px; } td.left_image_join { background-color: #CCCCCC; border-left: none; } td.right_image_join { background-color: #999999; border-right: none; } img { border: none; } </style> </head> <body> <table cellspacing="0px" cellpadding="5px"> <thead> <tr> <th></th> <th>Image</th> <th>Insert Heading Here</th> <th>Image</th> </tr> </thead> <tbody> <tr> <th>1</th> <td rowspan="2" class="left_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> </tr> <tr> <th>2</th> <td class="right_image_join">Data</td> </tr> <tr> <th>3</th> <td rowspan="2" class="left_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> </tr> <tr> <th>4</th> <td class="right_image_join">Data</td> </tr> <tr> <th>5</th> <td rowspan="2" class="left_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> </tr> <tr> <th>6</th> <td class="right_image_join">Data</td> </tr> <tr> <th>7</th> <td rowspan="2" class="left_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> </tr> <tr> <th>8</th> <td class="right_image_join">Data</td> </tr> <tr> <th>9</th> <td rowspan="2" class="left_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="https://www.gxlcms.com/Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s//Uploads-s/new/2019-09-27-201927/arnie.png"></td> </tr> <tr> <th>10</th> <td class="right_image_join">Data</td> </tr> </tbody> </table> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
PS.好象firefox 一直以来就有这个bug。问多久前有的？至少flock就有了
firefox下rowspan+border+border-collapse的bug_经验交流
firefox下rowspan+border+border-collapse的bug_经验交流:后查具体情况概述为：firefox+table rowspan+border+border-collapse:collapse; 表现情况是：第一行与最后一行正常，其余的中间行，全部都与预期的border不同。 先看示例吧： Rank's HTML document * {font-
推荐度：
点击下载本文
文档为doc格式
标签：
bug
firefox
border
热门焦点
最新推荐
猜你喜欢
热门推荐
专题
Top
