firefox下rowspan+border+border-collapse的bug

网络编程 2021-07-05 11:30www.168986.cn编程入门

好久没有发相关浏览器的坑了。今天同事cy发现，在firefox里rowspan不生效...

后查具体情况概述为firefox+table rowspan+border+border-collapse:collapse;
表现情况是第一行与一行正常，其余的中间行，全部都与预期的border不同。
先看示例吧

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://.w3./TR/html4/strict.dtd"><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"></head><body><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"> </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><tr class="zebra"><td> test </td><td rowspan="2"> </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 全选注:]

经过验证，两种解决方法。
去除border-collapse
加上一个border-left或者border-right
无独有偶，后来搜索了一下，也有前人踩到了这个坑里，它的解决方法也是border-left:1px solid #999 important;border-left:none的方法来解决。
(see detail:http://.experts-exchange./Web_Development/Web_Languages-Standards/CSS/Q_23698654.html)
好在可以通过border的错觉及颜色来解决这个问题。为了偷懒，我直接用上了对方的e.g。看解决前的代码

<html><head></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"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"></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"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"></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"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"></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"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"></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"></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"></td></tr><tr><th>10</th><td class="right_image_join">Data</td></tr></tbody></table></body></html>

[Ctrl+A 全选注:]

解决后的代码

[Ctrl+A 全选注:]

PS.好象firefox 一直以来就有这个bug。问多久前有的？至少flock就有了

上一篇：了解CSS的查找匹配原理，让CSS更简洁、高效下一篇：CSS的inherit与auto使用分析

firefox下rowspan+border+border-collapse的bug

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

firefox下rowspan+border+border-collapse的bug

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设