Chrome中的HTML显示IE中未显示的额外边框 [英] HTML in Chrome shows an additional border that not shown in IE
问题描述
您好，我在Google Chrome浏览器中显示了一个问题。Google chrome中显示了其他行，但在IE和Dreamweaver中没有此行。
这个想法是给一个单元格3个边框。
感谢您提前给予的帮助。
HTML片段
table {width：500px;边界崩溃：分开;表格布局：固定; border-spacing：4px; border：1px solid gray;}。ArrowCell {border-bottom：1px solid red; border-top：1px纯红色; border-left：1px纯红色; border-right：0;}
< table> < TR> < td rowspan =3>& nbsp;< / td> < td rowspan =2>& nbsp;< / td> < td rowspan =2>& nbsp;< / td> < TD>&安培; NBSP;< / TD> < td bgcolor =＃C4E1FF>< b> resultw< / b>< / td> < / TR> < TR> < td rowspan =4class =ArrowCell>& nbsp;< / td> < td bgcolor =＃F0F0F0> SDF< / TD> < / TR> < TR> < td bgcolor =＃C4E1FF>< b> resut1< / b>< / td> < td rowspan =2>& larr;< / td> < td rowspan =2>& nbsp;< / td> < / TR> < TR> < td rowspan =7class =ArrowCell>& nbsp;< / td> < td bgcolor =＃F0F0F0> 345°; / TD> < / TR> < TR> < td rowspan =5>& nbsp;< / td> < td rowspan =5>& nbsp;< / td> < td bgcolor =＃C4E1FF>< b>结果< / b>< / td> < / TR> < TR> < td rowspan =3>& nbsp;< / td> < td bgcolor =＃F0F0F0> SF< / TD> < / TR> < TR> < TD>&安培; NBSP;< / TD> < / TR> < TR> < td bgcolor =＃C4E1FF>< b> rest< / b>< / td> < / TR> < TR> < td rowspan =5class =ArrowCell>& nbsp;< / td> <如果我删除class =，那么整行将disaapear - > < td bgcolor =＃F0F0F0> sfd< / td> < / TR> < TR> < td bgcolor =＃C4E1FF>< b>结果2< / b>< / td> < td rowspan =2>& larr;< / td> < td rowspan =3>& nbsp;< / td> < / TR> < TR> < td rowspan =5style =border-left-color：#FFF>& nbsp;< / td> < td bgcolor =＃F0F0F0> 4356< / td> < / TR> < TR> < td rowspan =4>& nbsp;< / td> < td rowspan =4>& nbsp;< / td> < / TR> < TR> < td bgcolor =＃DFFFDF>< b> resultw< / b>< / td> < / TR> < TR> < td rowspan =2>& nbsp;< / td> < td bgcolor =＃C4E1FF> avv< / td> < / TR> < TR> < TD>&安培; NBSP;< / TD> < / TR> < / table>
't work
将此课程添加到附加行的单元格。
.ArrowLeft {
border-bottom：2px纯白色;
border-top：2px纯白色;
border-left：2px纯白色;
border-right：2px纯白色;
UPDATE <尽管OP的问题可能看起来很专业，但这可能适用于任何经历过桌面顽固边界并且似乎无法摆脱它的人。 / p> 在表中添加以下内容： 结果如下： http://jsfiddle.net/zer00ne/0Leqah5r 试试： Chrome浏览器中没有多余的行，但是当我检查它与devtools， 我只是想你的问题的另一种可能性。仔细检查并查看您的rowspans是否可能因彼此交叉而发生冲突。 另一个可能的解决方法是将 Hi I have a problem showing in Google Chrome.There is additional line showing in Google chrome, but in IE and in Dreamweaver, there is no such line.
The idea is to give a cell 3 borders. I have highlighted with in the snippet where this problem code is. Thanks for your help in advance. HTML snippet
One solution tried that doesn't work Add this class to the cell that with additional line.
UPDATE Although OP's problem may seem specialized, this could apply to anyone that has experienced a stubborn border on a table and can't seem to get rid of it. Add the following to the table: This is the result: http://jsfiddle.net/zer00ne/0Leqah5r Try: I don't see that extra line in Chrome PC, but when I inspect it with devtools, computed style for I just thought of another possibility to your issue. Double check and see if your rowspans might be conflicting by crossing into each other. Another possible fix is to change 这篇关于Chrome中的HTML显示IE中未显示的额外边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
表{
border-collapse：分开;
border-spacing：0;
empty-cells：hide;
}
.ArrowCell {
border-top：1px纯红色;
border-left：1px纯红色;
border-bottom：1px纯红色;
border-right：0固体透明;
}
.ArrowCell 的计算风格被报告为 0.8px纯黑色; 所以我猜测改变这是透明的颜色应该工作。
border-collapse：separate; 更改为 border-collapse ：collapse; 也许 border-spacing：0 。table {
width: 500px;
border-collapse: separate;
table-layout: fixed;
border-spacing: 4px;
border: 1px solid grey;
}
.ArrowCell {
border-bottom: 1px solid red;
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 0;
}<table>
<tr>
<td rowspan="3"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td bgcolor="#C4E1FF"><b>resultw</b></td>
</tr>
<tr>
<td rowspan="4" class="ArrowCell"> </td>
<td bgcolor="#F0F0F0"> sdf</td>
</tr>
<tr>
<td bgcolor="#C4E1FF"><b>resut1</b></td>
<td rowspan="2">←</td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="7" class="ArrowCell"> </td>
<td bgcolor="#F0F0F0"> 345</td>
</tr>
<tr>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td bgcolor="#C4E1FF"><b>result</b></td>
</tr>
<tr>
<td rowspan="3"> </td>
<td bgcolor="#F0F0F0"> sf</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td bgcolor="#C4E1FF"><b>rest</b></td>
</tr>
<tr>
<td rowspan="5" class="ArrowCell"> </td> <If I remove the class="", then the whole line will disaapear-->
<td bgcolor="#F0F0F0">sfd</td>
</tr>
<tr>
<td bgcolor="#C4E1FF"><b>result 2</b></td>
<td rowspan="2">←</td>
<td rowspan="3"> </td>
</tr>
<tr>
<td rowspan="5" style="border-left-color:#FFF"> </td>
<td bgcolor="#F0F0F0">4356 </td>
</tr>
<tr>
<td rowspan="4"> </td>
<td rowspan="4"> </td>
</tr>
<tr>
<td bgcolor="#DFFFDF"><b>resultw</b></td>
</tr>
<tr>
<td rowspan="2"> </td>
<td bgcolor="#C4E1FF">avv</td>
</tr>
<tr>
<td> </td>
</tr>
</table>.ArrowLeft {
border-bottom: 2px solid white;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
}
Table {
border-collapse: separate;
border-spacing: 0;
empty-cells: hide;
}
.ArrowCell {
border-top: 1px solid red;
border-left: 1px solid red;
border-bottom: 1px solid red;
border-right: 0 solid transparent;
}
.ArrowCell is reported as 0.8px solid black; so I'm guessing that changing it's color to transparent should work.border-collapse: separate; to border-collapse: collapse; and maybe border-spacing: 0 as well.
