web-dev-qa-db-de.com

Firefox 1-Pixel-Fehler mit Border-Collapse, Workaround?

Gibt es eine Problemumgehung für den folgenden Fehler "1 Pixel nach links"?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                                   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
    <tbody>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
        <tr>
            <td>Hello</td>
            <td>World</td>
        </tr>
    </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>

Es sieht aus wie das:

Firefox-CSS-Fehler http://i42.tinypic.com/245x9ud.png

Gibt es dafür eine reine CSS-Lösung?


Bearbeiten

Ich war etwas unklar, was meinen Tisch angeht, also hier ist es wieder:

Mit dem Zusammenbruch der Grenze:

Firefox-CSS-Fehler http://i42.tinypic.com/245x9ud.png

Mit cellspacing = "0" und ohne vorgeschlagenen Randeinsturz:

Firefox-CSS-Fehler http://i44.tinypic.com/2rg0qxi.png

Jetzt sind die Grenzen in meinem Tisch double, aber ich möchte einen 1px-Rahmen über meinem Tisch.

Wenn ich 1px-Rand von der Tabelle entferne, ende ich mit:

Firefox-CSS-Fehler http://i40.tinypic.com/2vbokmq.png

Die Grenzen sind immer noch in meinem Tisch verdoppelt.

Ich könnte für jedes TD nur den rechten und unteren Rand festlegen, TH und den linken Rand für jedes erste Kind in TR, um das zu erreichen, was ich will, aber ich denke, es gibt einen einfacheren Weg?

34
Vexatus

Entfernen Sie den Border-Collapse und verwenden Sie stattdessen cellspacing = 0. 

<table style="border: 15px solid green; width: 100%"  cellspacing="0">

Dies geschieht, wenn Firefox 2.0 beim Festlegen von border collapse: collapse den Rand außerhalb des tr-Bereichs platziert. Die anderen Browser legen es nach innen. 

Setzen Sie Ihre Randbreite in Ihrem Code auf 10 Pixel, um zu sehen, was wirklich passiert.


nach OP bearbeiten bearbeiten

Sie können den alten "Grenze" -Trick verwenden. Legen Sie die Hintergrundfarbe auf dem Tisch fest. Setzen Sie die Farbe td und th auf Weiß. Benutzerzellenabstand = 1;

table {background-color: green;width:100%;}
td, th{background-color:white;}

<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
        <tbody>
                <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                </tr>
                <tr>
                        <td>Hello</td>
                        <td>World</td>
                </tr>
        </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
18
Emily

Für diejenigen, die es vorziehen, die Präsentation außerhalb des Markups zu behalten oder die keinen Zugriff auf das Markup haben, ist hier eine reine CSS-Lösung. Ich bin selbst auf dieses Problem gestoßen und habe diese Lösung in FF3.5, IE6, IE7, IE8, Safari 4, Opera 10 und Google Chrome getestet. 

table { border-spacing: 0; *border-collapse: collapse; } 

Dadurch wird die Tabelle so eingestellt, dass der Randabstand in allen Browsern verwendet wird (einschließlich des Täters Firefox). Dann verwendet es den CSS-Star-Hack, um die Border-Collapse-Regel nur für IE zu präsentieren, wodurch der Abstand zwischen den Bändern nicht korrekt angewendet wird (Sie können auch ein separates Stylesheet für IE mit bedingten Kommentaren hinzufügen, wenn Sie nicht möchten Hacks). 

Wenn Sie den Zellenabstand vorziehen, verwenden Sie ihn auf alle Fälle. Dies wird einfach als alternative Methode unter Verwendung von CSS angeboten. 

22
Jon

Dieses Problem existiert nicht mehr. In Firefox 47.0.1 weist das folgende CSS kein Problem mit einem Pixel auf:

table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px #000;
}

Wir können auch saubere Einpixel-Ränder zum Laufen bringen, ohne auf eine funktionierende Implementierung von border-collapse angewiesen zu sein:

table {
  border: solid 1px #000;
  border-width: 0 1px 1px 0;
  border-spacing: 0;
}

th, td {
  border: solid 1px #000;
  border-width: 1px 0 0 1px;
}

Siehst du was es tut? Der Trick ist, dass wir die Zellen nur mit einem oberen und linken Rand versehen:

 +------+------
 | cell | cell
 +------+------
 | cell | cell

So bleibt der Tisch ohne rechten und unteren Rand: Wir formatieren diese auf table 

 + ------ + ------- | + ------- + ------ + 
 | Zelle | Zelle | | Zelle | Zelle | 
 + ------ + ------- + | = + ------- + ------ + 
 | Zelle | Zelle | | Zelle | Zelle | 
 | | --------- + + ------- + ------ + 

Der border-spacing: 0 ist wichtig, sonst werden diese Leitungen nicht verbunden.

5
Kaz

tabelle {Randabstand: 0; Grenzzusammenbruch: Zusammenbruch; }/* funktioniert in FF 3.5 * /

2
chovy
table { border-spacing: 0; *border-collapse: collapse; }

hat in FF 31 nicht für mich gearbeitet. Da ich unterschiedliche Farben für die Kopf- und Körperzellen habe, funktionierte der Trick für die Hintergrundfarbe der Tabelle nicht. Die einzige Lösung war folgende:

table {
  border-collapse: separate;
}    
table tbody td {
  border: 1px solid #000;
  border-top: none;
  border-left: none;

  &:first-child {
    border-left: 1px solid #000;
  }
}
table thead th {
  border-bottom: 1px solid #ff0000;

  &:first-child {
    border-left: 1px solid #ff0000;
  }
  &:last-child {
    border-right: 1px solid #ff0000;
  }
}
2
Tobias Hartmann

Beste CSS-Lösung:

Hinzufügen

td {
    background-clip: padding-box
}

Weitere Informationen: https://developer.mozilla.org/en-US/docs/CSS/background-clip

Danke an @medoingthings

1
helpse

Meine Lösung ist wie folgt.

  1. Entfernen Sie border-collapse, border und border-spacing aus CSS.
  2. Fügen Sie diesen JavaScript-Code hinzu:

    $('table tbody tr td').css('border-right', '1px solid #a25c17');
    $('table tbody tr td').css('border-bottom', '1px solid #a25c17');
    $('table tbody tr td:last-child').css('border-right', 'none');
    $('table').css('border-bottom', '1px solid #a25c17');
    

Um ehrlich zu sein, weiß ich nicht, warum es funktioniert. Es ist JQuery-Magie.

0
oEN

Ich glaube nicht, dass ich jemals von einem "1px nach links Fehler" gehört habe. Sie sollten Ihren Code irgendwo hochladen, damit wir ihn überprüfen können und sicherstellen können, dass es sich nicht um einen Fehler "Ich habe irgendwo etwas vermisst" :) würde Durchlaufen Sie Ihr Markup mit Firebug, um festzustellen, ob noch etwas schief läuft.

0
Sampson

Bin in dieses Problem geraten und als Workaround. Ich benutzte :

table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;}
table td{border:none;}

im Grunde hat die Grenze mit einer Hintergrundfarbe betrogen. Das verhinderte somit doppelte Innengrenzen.

0
Shane

Ich wurde heute davon gebissen. Die angebotenen Abhilfemaßnahmen funktionierten nicht für mich und ich fand meine eigene:

table { border: 1px solid transparent; border-collapse: collapse; }

Auf diese Weise erhalten Sie ausgeblendete Ränder, keine doppelten Ränder und alles innerhalb der gewünschten Grenzen ohne browserspezifische Regeln. Keine Nachteile.

0
rasenplanscher

Ich bin auf dieses Problem gestoßen - aber in meinem Fall hatte es damit zu tun, dass die Tabelle in einem div-Satz verschachtelt wurde, der überläuft: hidden. Ich habe das entfernt und es hat funktioniert.

0
user251742