After the specific situation is summarized as: Firefox+table Rowspan+border+border-collapse:collapse;
The performance is: the first line and the last line is normal, the rest of the middle row, all are different from the expected border.
Let's look at the example:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" ><ptml><pead> <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></pead><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%" > First column </th><th width= "50%" > second column </th></tr><tr class= "" ><td> test </TD><TD rowspan= "2" > First middle without horizontal line </TD></TR><TR clAss= "" ><td>test</td></tr><tr class= "zebra" ><td> test </td><td rowspan= "2 "> Cute Firefox lets us see two lines </td></tr><tr class=" Zebra "><td>test</td></tr>< TR class= "" ><td> Test </td><td rowspan= "2" > Cute Firefox lets us see two lines </td></tr><tr Class= "" ><td>test</td></tr><tr class= "zebra" ><td> test </td><td rowspan= "2" > Cute Firefox let's see two lines </td></tr><tr class= "Zebra" ><td>test</td></tr> <tr class= "" ><td> Test </td><td rowspan= "2" > Last middle without horizontal line </td></tr><tr class= "" ><td>test</td></tr></table></body></ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
Proven, two solutions.
Remove Border-collapse
Plus a border-left or border-right.
Coincidentally, later search, there are predecessors stepped on the pit, its 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, the illusion and color of border can be used to solve this problem. In order to lazy, I directly use the other side of the e.g. Look at the code before the solution:
<ptml><pead><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></pead><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></ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
After the code is resolved:
<ptml><pead><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 */bord Er-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></pead><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></ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
PS. It seems that Firefox has had this bug all along. How long ago did you ask? At least flock's got it.
