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:
Stesso HTML in IE 10/Windows 7:
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 ...
Lo stesso problema esiste in IE 10 su Windows 8 –
Il problema è anche lì, se tutti gli
Basta assegnare gli stili a 'td's nel primo' tr' invece di ' col's. – Teemu