2011-11-24 12 views
5

Ho una tabella in cui ho questoCSS con riga della tabella in Google Chrome

</tr> 
<tr class="table-top-background" > 
<td class="thread-pic" ></td> 
<td class="thread-top-middle" colspan="2" >Threads</td> 
<td class="thread-information">Last Post</td> 
</tr> 

Allora voglio dare un'immagine di sfondo al mio TR, così ho messo questa

.table-top-background 

    { 
     background:url('/img/design/extra-large-back.png') no-repeat; 
     position:relative; 
     color:White; 
     height:31px; 
    } 

    .thread-pic 
{ 
    width:30px; 
} 

.thread-information 
{ 
    width:280px; 
} 

.thread-top-middle 
{ 
    width:418px; 
} 

Il problema è che in tutti i browser va bene aspettarsi Google Chrome. In Google Chrome sembra che io dia sfondo non a tr, ma a tutti td's ... Ripete lo stesso sfondo per ogni td.

È lo stesso in IE7, ma in una delle domande StackOverflow ho letto sulla soluzione di questo con position:relative e mi ha aiutato. Ma non ho trovato nessun solutuin per Chrome. Cerco di dare tr css come questo anche

.table-top-background 

{ 
    background:url('/img/design/extra-large-back.png') no-repeat 0% 100%; 
    display:block; 
    position:relative; 
    color:White; 
    height:31px; 
    width:728px; 
} 

Ma cambiare tutto il mio disegno tavolo ... A quel tempo il testo di in TD di questa riga di intestazione non sono in quei luoghi e anche tutti gli altri prima TD del mio tavolo sono delle stesse dimensioni del mio header tr. Sembra davvero collinoso.

Ho provato anche a dare display:inline-table anziché display:block e non ha aiutato anche me ... Qual è la soluzione di questo problema?

MODIFICA: Lo stesso problema si verifica in Safari, quindi è un problema con il Web.

+0

Duplicato: http://stackoverflow.com/questions/2594428/google-chrome-bug-with-tr-background –

risposta

0

Utilizzando display: table-cell sul <TR> sembra per fare il trucco, ma potrebbe avere effetti collaterali in Chrome o altri browser.

+0

Rende il mio tr size come seconda td size ... Non so perché ... –

Problemi correlati