Grenzen nicht angezeigt, in Firefox mit border-collapse auf die Tabelle, position: relative, auf tbody, oder hintergrund-Farbe auf die Zelle

Betrachten Sie den folgenden HTML-Code:

HTML:

<html>
<head>
    <style>
        TABLE.data TD.priceCell
        {
            background-color: #EEE;
            text-align: center;
            color: #000;
        }
    
        div.datagrid table
        {
            border-collapse: collapse;
        }
    
        div.datagrid table tbody
        {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="contents" class="datagrid">
        <table class="data" id="tableHeader">
            <thead>
                <tr class="fixed-row">
                    <th>Product</th>
                    <th class="HeaderBlueWeekDay">Price</th>
                    <th class="HeaderBlueWeekDay">Discount</th>
                </tr>
            </thead>
            <tbody>
                <tr style="font-style: italic;">
                    <td>Keyboard</td>
                    <td class="priceCell">20</td>
                    <td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Beachten Sie, dass die Letzte Zelle hat eine linke und eine Rechte Grenze in Ihrer inline-style. Man (oder zumindest ich) würde erwarten, dass dieses sichtbar zu sein. Im IE ist dies der Fall. Aber in Firefox (6), ist dies nicht. Sie können dieses Problem lösen:

Entfernen position in Bezug auf div.datagrid table tbody im CSS
Ändern div.datagrid table tbody zu div.datagrid table im CSS
Entfernen der background-color auf table.data td.priceCell im CSS
Entfernen der border-collapse auf div.datagrid table im CSS

Dies ist eine vereinfachte version unseres Codes, die wir auch gelöst haben (über option 2). Was ich aber überlege ist:

Ist das ein bug im Firefox?
Ist das ein bug im IE?

Und vor allem: was ist der Grund, Firefox nicht zeigen, die Grenzen bei der CSS ist, wie es ist?

Frag mich nicht warum, aber wenn ich zog die border-collapse Eigenschaft aus der div.datagrid table in die table.data selbst in die CSS oben, es funktionierte gut. Vielleicht gibt es jemand hier, der erklären kann... (ich bin auf Firefox 5)
Ich habe nicht eine Antwort auf Ihre Frage. Ich vermute das ist ein bug, da die relative Positionierung sollte sich nicht auf Grenzen, aber ich habe einen vereinfachten Testfall und alle 4 Browser angezeigt, es anders! (Fx6, Op 11.50, IE8, Chrome 15) Test hier: jsfiddle.net/76Qb7/9
Lief nur in diesem Thema ... komisch, dass ein firefox-bug weiterhin besteht über eine solche Zeitspanne.

InformationsquelleAutor Peter | 2011-09-22

58

Dieser sieht aus wie ein Firefox-bug zu mir. Die Hintergründe sind Malerei über die Grenzen; Sie können es sehen, wenn Sie eine durchscheinende hintergrund-Farbe.

Reichte ich https://bugzilla.mozilla.org/show_bug.cgi?id=688556
- Ein dickes Lob für die Einreichung der Fehler.
- Ich lief in das gleiche Problem. Es ist immer noch nicht behoben ist, indem Sie Firefox. Scheint Sie nicht nehmen es ernst genug, während es eine große design-Problem bei der Verwendung des :nth-child(odd) - Selektor als auch, um einen hintergrund hinzuzufügen, um nur die ungeraden Zeilen. Ich brauche die Grenze perfekt zu machen. Thansk für die Einreichung der Fehler!
- Dies ist ein dupe von bugzilla.mozilla.org/show_bug.cgi?id=63895
- Eigentlich nicht. Es ist nicht...
InformationsquelleAutor Boris Zbarsky
156

Lief einfach in diesem Thema und kam zu einem css-Lösung:
fügen Sie einfach background-clip: padding-box zu Ihrem td element.

Finden Sie in diesem Artikel weitere Informationen: https://developer.mozilla.org/en-US/docs/CSS/background-clip
- Huh, ich verstehe es nicht. Die docs sagen, es gibt an ob der hintergrund erstreckt sich das unter die Grenze. Ich bekomme den Eindruck, dass es gerendert auf der Oberseite des Rahmens.
- Sie gerade gespeichert haben mir ein echtes Kopf-Schmerzen, danke!
- Am besten nur CSS Lösung, die ich gefunden habe. Vielen Dank für das teilen @medoingthings
- Dieser arbeitete für mich 😀
InformationsquelleAutor medoingthings

Nur, um alles an einem Ort.

Das problem entsteht, wenn Sie eine Zelle mit position relativ innerhalb einer Tabelle mit gefalteten Ränder (wie Boris gekennzeichnet und gefüllt in den bug https://bugzilla.mozilla.org/show_bug.cgi?id=688556)

Dies kann leicht gelöst werden, mithilfe von CSS wie angegeben durch user2342963 (Hinzufügen von background-clip: padding-box auf der Zelle).

Können Sie sehen, das problem (mit Firefox) und den fix hier: http://jsfiddle.net/ramiro_conductiva/XgeAS/

table {border-spacing: 0px;}
td {border: 1px solid blue; background-color: yellow; padding: 5px;}
td.cellRelative {position: relative;}
td.cellRelativeFix {background-clip: padding-box;}
table.tableSeparate {border-collapse: separate;}
table.tableCollapse {border-collapse: collapse;}

<table class="tableSeparate">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>
<table class="tableCollapse">
    <tbody>
        <tr>
            <td class="cellRelative cellRelativeFix">position: relative</td>
            <td>position: static</td>
        </tr>
    </tbody>
</table>

Dies funktioniert, um den Fehler zu beheben im FF, aber im IE gibt es einen hässlichen weißen Rand innerhalb der regelmäßigen Grenze wie lösen wir das?

InformationsquelleAutor Ramiro Sánchez

8

Dies ist ein bug in firefox und ich hoffe Sie beheben es schnell. Aber in der Zwischenzeit konnte ich beheben dieses Problem für mich durch meine Einstellung td Zellen position: static. Hoffentlich wird jemand anderes helfen.
```
td {
    position: static;
}    
```
- Perfekt ! Es funktioniert Super.
- Wenn Sie mit pseudo-Elementen, wie ::before oder ::after auf der gleichen td, position: static patzt diese stylings auf. background-clip: padding-box ist sicherer.
InformationsquelleAutor smitt04
2

Andere mögliche Lösung ist die richtige colspan Fehler in Ihren Tabellen-markup-Code.

Anscheinend kann colspan Fehler dazu führen, dass die gleichen Effekte mit versteckten Grenzen bei der Verwendung von border-collapse: collapse;

Wurde ich weitergeleitet zu der richtigen Lösung durch die http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html.

In meiner Tabelle, die ich geschrieben hatte, <th colspan="9"> wenn es nur 8 Spalten.

Verursacht Fehler (versteckte rechten Rand) in
- Chrome 51.0.2704.103 m (64-bit)
- Vivaldi 1.2.490.43 () (32-bit)
aber gerendert mit dem rechten Rand in
- Firefox 44.0.2
- IE 11 (11.420.10586.0)
- Edge 25.10586.0.0
- Entfernen von border-collapse: collapse from table-element half uns
InformationsquelleAutor pekaaw

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.