Rowspan border border-collapse bug under firefox_Experience exchange

After checking, the specific situation is summarized as follows: firefox table rowspan border border-collapse:collapse;
The performance is: the first row and the last row are normal, and the remaining middle rows are all different from the expected border.
Let’s look at the example first:

<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> <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%">First column</th> <th width="50%">Second column</th> </tr> <tr class=""> <td> test </td> <td rowspan="2"> <a href="#">The first one has no horizontal line in the middle</a> </td> </tr> <tr class=""> <td>test</td> </tr> <tr class="zebra"> <td> test </td> <td rowspan="2"> <a href="#">The cute firefox allows us to see two lines</a> </td> </tr> <tr class="zebra"> <td>test</td> </tr> <tr class=""> <td> test </td> <td rowspan="2"> <a href="#">The cute firefox allows us to see two lines</a> </td> </tr> <tr class=""> <td>test</td> </tr> <tr class="zebra"> <td> test </td> <td rowspan="2"> <a href="#">The cute firefox allows us to see two lines</a> </td> </tr> <tr class="zebra"> <td>test</td> </tr> <tr class=""> <td> test </td> <td rowspan="2"> <a href="#">The last one has no horizontal line in the middle</a> </td> </tr> <tr class=""> <td>test</td> </tr> </table>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before it can be executed]

After verification, there are two solutions.
Remove border-collapse
Add a border-left or border-right
Coincidentally, after searching a little, I found that some people have stepped into this pit, and the solution is also: border-left:1px solid #999 important;border-left:none method to solve.
(see detail:http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_23698654.html)
Fortunately, this problem can be solved through the illusion and color of the border. In order to be lazy, I directly used the other party's e.g. Look at the code before solution:

<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> <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="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="Rowspan border border-collapse bug under firefox_Experience exchange" ></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="Rowspan border border-collapse bug under firefox_Experience exchange" ></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="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="Rowspan border border-collapse bug under firefox_Experience exchange" ></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="Rowspan border border-collapse bug under firefox_Experience exchange" ></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="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="Rowspan border border-collapse bug under firefox_Experience exchange" ></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="Rowspan border border-collapse bug under firefox_Experience exchange" ></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="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="Rowspan border border-collapse bug under firefox_Experience exchange" ></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="Rowspan border border-collapse bug under firefox_Experience exchange" ></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="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="Rowspan border border-collapse bug under firefox_Experience exchange" ></td> <td class="left_image_join">Data</td> <td rowspan="2" class="right_user_img"><img src="http://msn.mess.be/data/thumbnails/16/arnie.png" alt="Rowspan border border-collapse bug under firefox_Experience exchange" ></td> </tr> <tr> <th>10</th> <td class="right_image_join">Data</td> </tr> </tbody> </table>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]