Firefox 1 pixel bug con border-collapse, soluzione alternativa?

StackOverflow https://stackoverflow.com/questions/1035706

  •  10-07-2019
  •  | 
  •  

Domanda

Esistono soluzioni alternative per il seguente "1 pixel a sinistra" bug? 

    <!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>

Sembra così:

Firefox CSS bug

Esiste una soluzione CSS pura per questo?

Modifica

Ero un po 'poco chiaro sul mio tavolo, quindi eccolo di nuovo:

Con confine-collasso:

Firefox CSS bug

Con cellpacing = " 0 " e senza collasso delle frontiere come suggerito:

Firefox CSS bug

Quindi ora i bordi all'interno del mio tavolo sono raddoppiati , ma voglio un bordo 1px sul mio tavolo.

Quando rimuovo il bordo 1px dalla tabella, finisco con:

Firefox CSS bug

I bordi sono ancora raddoppiati all'interno del mio tavolo.

Potrei impostare solo il bordo destro e inferiore per ogni TD, TH e il bordo sinistro per ogni primo figlio in TR per ottenere ciò che voglio, ma penso che ci sia un modo più semplice?

È stato utile?

Soluzione

Rimuovi border-collapse e usa invece cellpacing = 0. 

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

Succede perché quando imposti border-collapse: collapse, Firefox 2.0 mette il bordo all'esterno del tr. Gli altri browser lo mettono all'interno.

Imposta la larghezza dei bordi su 10px nel codice per vedere cosa sta realmente accadendo.

modifica dopo OP modifica

Puoi utilizzare la vecchia tabella " border " trucco. Imposta il colore di sfondo sul tavolo. Imposta il colore td e th su bianco. User cellpacing = 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>

Altri suggerimenti

Per coloro che preferiscono mantenere la presentazione fuori dal markup o che non hanno accesso al markup, ecco una soluzione puramente CSS. Mi sono appena imbattuto in questo problema e ho testato questa soluzione in FF3.5, IE6, IE7, IE8, Safari 4, Opera 10 e Google Chrome. 

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

Questo imposta la tabella per usare la spaziatura dei bordi in tutti i browser (incluso il colpevole, Firefox). Quindi usa l'hack star CSS per presentare la regola del collasso dei bordi solo a IE, che non applica correttamente la spaziatura dei bordi (potresti anche includere un foglio di stile separato per IE con commenti condizionali se non ti piacciono gli hack).

Se preferisci usare la spaziatura cellulare, usalo sicuramente. Questo è semplicemente offerto come metodo alternativo usando CSS.

Questo problema non esiste più. In Firefox 47.0.1, il seguente CSS non presenta il problema di un pixel: 

table {
  border-collapse: collapse;
}

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

Possiamo anche far funzionare bordi puliti di un pixel senza fare affidamento su un'implementazione funzionante di border-collapse , in questo modo: 

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;
}

Vedi cosa sta facendo? Il trucco è che mettiamo solo un bordo superiore e sinistro sulle celle: 

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

Questo lascia il tavolo senza un margine destro e inferiore: li modelliamo su table 

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

Il border-spacing: 0 è essenziale altrimenti queste linee non si collegheranno.

table {border-spaziatura: 0; confine-collasso: collasso; } / * funziona in FF 3.5 * /

Migliore soluzione solo CSS:

Aggiungi 

td {
    background-clip: padding-box
}

Ulteriori informazioni: https://developer.mozilla.org/en -US / docs / CSS / background-clip di

Grazie a @medoingthings 

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

non funzionava per me in FF 31. Dal momento che ho colori diversi per le cellule di thead e tbody, anche il trucco del colore di sfondo del tavolo non funzionava. L'unica soluzione era la seguente: 

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;
  }
}

Non credo di aver mai sentito parlare di un " 1px al bug sinistro, " dovresti caricare il tuo codice da qualche parte in modo che possiamo controllarlo e assicurarci che non sia " ho perso qualcosa da qualche parte " bug :) Suggerirei anche di eseguire il markup con Firebug per determinare se c'è qualcos'altro che non va.

Ho riscontrato questo problema, ma nel mio caso aveva a che fare con la tabella nidificata in un div impostato su overflow: nascosto. Ho rimosso questo e ha funzionato.

Ho affrontato questo problema e come soluzione. Ho usato: 

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

sostanzialmente ha ingannato il bordo usando un colore di sfondo. Ciò ha quindi impedito il doppio confine interno.

La mia soluzione è la seguente.

  1. Rimuovi border-collapse , border e border-spacing dai CSS.

  2. Aggiungi questo codice JavaScript: 

    $('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');

Ad essere sincero, non so perché funzioni. È magia di jQuery.

Sono stato morso da questo oggi. I work-around offerti non hanno funzionato per me, quindi ho trovato il mio: 

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

In questo modo, ottieni bordi compressi, nessun doppio bordo e tutto ciò che rientri nei limiti desiderati, senza regole specifiche del browser. Nessun inconveniente.

Ho anche riscontrato questo problema, la soluzione a prova completa è molto semplice nel tuo asp: gridview basta aggiungere 

GridLines="None"

e le linee scompaiono in Firefox non sono necessarie modifiche ai css.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top