Chrome-bug mit colspan und Grenze?
Im Beispiel unten gibt es eine Grenze auf der Oberseite der rechten Zelle. Es erscheint nur in Chrom, es ist ein Chrome bug?
HTML /CSS
CSS:
html,
body {
height: 100%;
}
table {
border-collapse: collapse;
width: 100%;
height: 100%;
}
.left {
border-right: 1px #aaaaaa solid;
border-top: 1px #aaaaaa solid;
}
HTML:
<table>
<tr>
<td colspan=2>top</td>
</tr>
<tr>
<td class="left">left</td>
<td>right</td>
</tr>
</table>
Hier ist das Beispiel wie ein Turnschuh.
Chrome Screenshot
- Es sieht sogar noch mehr glitchy, wenn Sie gestylt Ihre Grenze, wie dies (border-top: 3px #aaaaaa gestrichelte;). Bitte haben Sie einen Blick: jsfiddle.net/5366whmf/28 BTW, es ist fast wie ein Jubiläum für die Fehler, aber das problem wurde nicht gelöst.
- dieser Google-Chrome-bug noch vermehrt heute, mit der neuesten chrome-Version 72.0.3626.121 (Offizieller Build) (64-bit)
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies scheint der gleiche bug hier aufgelistet (oder ähnlich)
Eine einfache Problemumgehung ist am Ende dieser Antwort.
Dies ist ein relevanter Kommentar unter diesem bug-report:
Hier ist ein Beispiel, dass zeigt das gleiche problem:
CSS:
HTML:
Ich fügte dies hinzu:
Die Ergebnisse in diesem in Chrome:
Diese graue Grenze würde nicht zwischen der Doppel-roten Rand, wenn es sich nicht um einen bug.
Zum Vergleich, das ist, wie es Aussehen sollte (in Firefox):
Hier sind die Regeln der Grenzkonflikte:
Regel 1: Sie reden nicht über die Grenze Konflikte
Abhilfe
Hier ist eine Abhilfe, die einfach nicht mit
border-collapse: collapse
:CSS:
HTML:
Da es ein Chrome-Bug denke mal ein workaround. So weit kam ich erst mit eine, umfasst das ändern der html:
http://jsfiddle.net/5366whmf/24/
Es fügt eine weitere Zeile:
border-collapse: separate
(der Standard), als der bug ist in Bezug auf das ausblenden der Grenzen, und dann legen Sie die Grenzen wie erforderlich. Wie dieses Beispiel