Layout tabella IE10: risolto in caso di utilizzo di colspan

Il seguente HTML viene visualizzato perfettamente in tutti i browser più comuni, incluso IE7-9, ma non riesce in IE10. Anche quando si esegue IE10 in modalità compatibilità, fallisce.Layout tabella IE10: risolto in caso di utilizzo di colspan

<html> 
    <body> 
     <table style="table-layout:fixed;width:500px"> 
     <colgroup> 
      <col style="width:100px" ></col> 
      <col ></col> 
      <col style="width:100px" ></col> 
      <col ></col> 
     </colgroup> 
     <tbody> 
      <tr> 
       <td colspan="2"> 
        <div style="background:red;"> red </div> 
       </td> 
       <td colspan="2"> 
        <div style="background:green;"> green </div> 
       </td> 
      </tr> 
     </tbody> 
     </table> 
    </body> 
</html>

Mentre in tutti gli altri browser le celle 2 sono uguali dimensioni, in IE10 (almeno durante il funzionamento a Windows7) prima cella è più larga della seconda.

Questo HTML in IE 9/Windows 7:

In IE 9

Stesso HTML in IE 10/Windows 7:

In IE 10

TestPage: http://www.dinkypage.com/167605

bug riportato: https://connect.microsoft.com/IE/feedback/details/781009/ie-10-fails-to-render-tables-width-fixed-layout-correctly

Qualcuno sa soluzione/soluzione per questo problema?

AGGIORNAMENTO: Ho chiesto a Microsoft di riaprire il bug segnalato perché è una violazione dello standard w3c. La risposta è:

"Il problema segnalato è di progettazione. Internet Explorer utilizza solo il primo set di tag TD per impostare la larghezza per una colonna.".

standard W3C (http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout) dice:

Nell'algoritmo impaginazione fissa di tabella, la larghezza di ciascuna colonna è determinato come segue:

Un elemento colonna con un valore diverso di 'auto' per la proprietà 'width' imposta la larghezza per quella colonna.

Altrimenti, una cella nella prima riga con un valore diverso da 'auto' per la proprietà 'width' determina la larghezza per quella colonna. Se la cella si estende su più di una colonna, la larghezza viene divisa sulle colonne.

Eventuali colonne rimanenti dividono equamente il rimanente spazio orizzontale del tavolo (meno i margini o la spaziatura tra le celle).

Ciò significa che, questa funzione è interrotta da disegno in IE 10. Vi consiglio di usare un altro browser o rimanere con IE 9 ...

fonte

2013-03-07 Michael Wyraz

Lo stesso problema esiste in IE 10 su Windows 8 –

Il problema è anche lì, se tutti gli s hanno una larghezza definita ... –

Basta assegnare gli stili a 'td's nel primo' tr' invece di ' col's. – Teemu

mia soluzione attuale è il seguente stile:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
    table colgroup { display: table-row; } 
    table colgroup col { display: table-cell; } 
}

In questo modo il browser gestisce colgroup/col come tr/td ed è simile al suggerimento di Teemu (ma senza brutti html hack). Il selettore multimediale rende visibile il css solo a IE10 +

fonte

2013-03-12 08:07:52

Mi sono imbattuto in questo, a IE9 in realtà.L'unica soluzione che ho trovato è, infatti, di mettere in una prima riga fittizia nascosta nella tabella:

<tr style="visibility: hidden"><td></td><td></td><td></td><td></td></tr>

Quindi, per liberarsi del gap risultante, applico un negativo margin-top all'intera tabella. Non elegante, ma sembra aver fatto il lavoro.

fonte

2013-03-27 09:26:50 MisterNeutron

Mi chiedo un po 'di questo perché non ho mai avuto problemi simili in IE9 prima - l'esempio che ho scritto funziona in IE9 (e tutti gli altri browser tranne IE10). –

È difficile risolverlo, perché il tuo HTML ha un sacco di altri errori correlati. Dai da mangiare al tuo codice tramite un validatore e vedrai cosa intendo. – MisterNeutron

solito fanno simili

<colgroup width="100%"> // for table a whole 
    <col width="50%"> // for each column 
    <col width="50%"> 
</colgroup>

50% per 2 colonne, 33% per 3, ecc

Questa lavorato per IE10.

fonte

2015-04-29 08:07:16

Layout tabella IE10: risolto in caso di utilizzo di colspan

risposta

Problemi correlati