天域苍穹,完美世界国际版下载

主頁 > 知識庫 > firefox下rowspan+border+border-collapse的bug

firefox下rowspan+border+border-collapse的bug

后查具體情況概述為：firefox+table rowspan+border+border-collapse:collapse;
表現(xiàn)情況是：第一行與最后一行正常，其余的中間行，全部都與預(yù)期的border不同。
先看示例吧：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/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"><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需再刷新一下頁面才能執(zhí)行]

經(jīng)過驗證，兩種解決方法。
去除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?？唇鉀Q前的代碼：

<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="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></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="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></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="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></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="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></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="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></td></tr><tr><th>10</th><td class="right_image_join">Data</td></tr></tbody></table></body></html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

解決后的代碼：

<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="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></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="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></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="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></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="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></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="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></td><td class="left_image_join">Data</td><td rowspan="2" class="right_user_img"><img src="/d/20211017/4d2a36cb5bb920e7dae509ae9a3cca3f.gif" /></td></tr><tr><th>10</th><td class="right_image_join">Data</td></tr></tbody></table></body></html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

PS.好象firefox 一直以來就有這個bug。問多久前有的？至少flock就有了

標(biāo)簽：賀州混顯廣安貴州鶴壁邵陽滄州萊蕪

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《firefox下rowspan+border+border-collapse的bug》，本文關(guān)鍵詞 firefox,下,rowspan+border+border-collapse,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

濮阳杆衣贸易有限公司

firefox下rowspan+border+border-collapse的bug