frontiere non mostrato in Firefox con border-collapse sul tavolo, position: relative il tbody o background-color sulla cella

Si consideri il seguente codice HTML:frontiere non mostrato in Firefox con border-collapse sul tavolo, position: relative il tbody o background-color sulla cella

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

Si noti che l'ultima cella ha un bordo sinistro e uno destro nel suo stile in linea. Tu (o almeno io) ti aspetteresti che fosse visibile. In IE, questo è il caso. Ma in Firefox (6), questo non lo è. È possibile risolvere questo problema:

Rimozione posizione relativa sul div.datagrid table tbody nel CSS
Modifica div.datagrid table tbody-div.datagrid table nel CSS
Rimozione del background-color sul table.data td.priceCell nel CSS
Rimozione del border-collapse su div.datagrid table in il CSS

Questa è una versione semplificata del nostro codice; l'abbiamo anche risolto (scegliendo l'opzione 2). Ma quello che mi sto chiedendo è:

Si tratta di un bug in Firefox?
Si tratta di un bug in IE?

E soprattutto: quale è la ragione per cui Firefox non mostrerebbe i bordi quando il CSS è così com'è?

fonte

2011-09-22 Peter

Non chiedetemi perché, ma quando mi sono trasferita la proprietà 'border-collapse' dal table'' div.datagrid nel 'table.data' stesso nel CSS sopra, ha funzionato bene. Forse c'è qualcun altro qui che può spiegare ... (sono su Firefox 5) – compostus

Non ho una risposta alla tua domanda. Sospetto che si tratti di un bug, in quanto il posizionamento relativo non dovrebbe influire sui bordi, ma ho creato un caso di test semplificato e tutti e 4 i browser lo hanno visualizzato in modo diverso! (Fx6, Op 11.50, IE8, Chrome 15) Test case qui: http://jsfiddle.net/76Qb7/9/ – Doug

Questo mi sembra un bug di Firefox. Gli sfondi stanno dipingendo oltre i confini; puoi vederlo se usi un colore di sfondo traslucido.

ho presentato https://bugzilla.mozilla.org/show_bug.cgi?id=688556

fonte

2011-09-22 18:50:50

Complimenti per aver archiviato il bug. – Peter

Ho eseguito lo stesso problema. Non è ancora stato risolto da Firefox. Sembra che non lo prendano seriamente mentre è un grosso problema di design quando si usa il selettore nth-child (dispari) e per aggiungere uno sfondo alle sole righe dispari. Ho bisogno anche del confine per renderlo perfetto. Grazie per aver archiviato l'errore! – Jelmer

Questo è un dupe di https://bugzilla.mozilla.org/show_bug.cgi?id=63895 – DriverDan

113

appena incontrato questo problema ed è venuto a un css unica soluzione: basta aggiungere background-clip: padding-box al vostro elemento td.

Vedi questo articolo per ulteriori informazioni: https://developer.mozilla.org/en-US/docs/CSS/background-clip

fonte

2013-05-02 11:42:51 medoingthings

Huh, non capisco. I documenti dicono che specifica se lo sfondo si estende * al di sotto * del bordo. Ho l'impressione che sia reso in cima al confine. – Peter

+12

Mi hai appena salvato un vero mal di testa, grazie! –

La migliore soluzione solo per CSS che ho trovato. Grazie per aver condiviso @medoingthings – helpse

Questo è un bug in Firefox e speriamo che fissarlo al più presto. Ma nel frattempo sono riuscito a risolvere il problema impostando le mie celle td su position: static. Spero che questo aiuti qualcun altro.

td { 
    position: static; 
}

fonte

2013-09-15 03:49:38 smitt04

Perfetto! Funziona alla grande. – Steffi

Se si usano pseudo-elementi come ':: before' o' :: after' sullo stesso 'td',' position: static' scompiglia questi stili. 'background-clip: padding-box' è più sicuro. – Sebsemillia

Solo per mettere tutto in un unico posto.

Il problema è prodotta quando si dispone di una cella con posizione relativa in una tabella con bordi collassati (come Boris indicato e compilato l'insetto https://bugzilla.mozilla.org/show_bug.cgi?id=688556)

Questo può essere facilmente risolto utilizzando CSS come indicato dalla user2342963 (aggiunta background-clip: padding-box alla cella).

È possibile vedere il problema (con Firefox) e la correzione qui: 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>

fonte

2013-09-27 09:23:43

Questo funziona per correggere il bug in FF, ma in IE c'è un orribile bordo bianco all'interno del bordo regolare come lo ripariamo? –

Un'altra possibile soluzione è quella di correggere gli errori colspan nella tabella markup.

Apparentemente gli errori di colspan possono causare gli stessi effetti con i bordi nascosti quando si utilizza il border-collapse: collapse;

Sono stato indirizzato alla soluzione giusta tramite http://www.codingforums.com/html-and-css/46049-border-collapse-hiding-some-outside-borders.html.

Nel mio tavolo avevo scritto < th colspan = "9" > quando c'erano solo 8 colonne.

che ha causato l'errore (bordo destro nascosto) in

Chrome 51.0.2704.103 m (64-bit)
Vivaldi 1.2.490.43() (32-bit)

ma reso con bordi giusti in

Firefox 44.0.2
IE 11 (11.420.10586.0)
bordo 25.10586.0.0

fonte

2016-07-13 12:17:46 pekaaw

Rimozione della compressione del bordo: la compressione dall'elemento tabella ci ha aiutato –

frontiere non mostrato in Firefox con border-collapse sul tavolo, position: relative il tbody o background-color sulla cella

risposta

Problemi correlati