Chrome渲染错误与边框崩溃 [英] Chrome render bug with border-collapse

问题描述

Chrome浏览器错误地呈现了此标记

以及Firefox或Edge中相同的标记：

在Chrome中有什么方法可以解决这个问题？

解决方案

根据带有colspan和边框的Chrome错误？，这是Chrome 错误自2008年以来...尚未修复。

此问题的一种解决方法是：不使用 colspan 。示例代码为：

 < tr> 
< td class = A> 1< / td> 
< td class = A> 2< / td> 
< td class = A> 3< / td> 
< td>< / td> 
< td>< / td> 
< td>< / td> 
< / tr> 
  

而不是

 < tr> 
< td class = A> 1< / td> 
< td class = A> 2< / td> 
< td class = A> 3< / td> 
< td colspan = 3< / td> 
< / tr> 
  

小提琴作为示例。

或者，您可以使用先生曼萨姆的解决方法，放弃了边界崩溃。

Chrome renders this markup incorrectly (see jsfiddle for full markup).

table { border-collapse: collapse }

Here it is in Chrome:

and the identical markup in Firefox or Edge:

Is there any way to resolve this in Chrome?

解决方案

According to Chrome bug with colspan and border?, this is a Chrome bug since 2008... which is not fixed yet.

One workaround for this issue is: not use colspan. Sample code is:

<tr>
  <td class=A>1</td>
  <td class=A>2</td>
  <td class=A>3</td>
  <td></td>
  <td></td>
  <td></td>
</tr>

instead of

  <tr>
    <td class=A>1</td>
    <td class=A>2</td>
    <td class=A>3</td>
    <td colspan=3></td>
  </tr>

fiddle for your example.

Or, you can use mistermansam's workaround by abandon border-collapse.

这篇关于Chrome渲染错误与边框崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！