IE10 table-layout:fixe cassé, si colspan est utilisé

Le code HTML suivant rend parfaitement dans tous les navigateurs les plus courants, y compris IE7-9, mais échoue dans IE10. Même lors de l'exécution de IE10 en mode de compatibilité, il échoue.

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

Alors que dans tous les autres navigateurs les 2 cellules sont de taille égale, sur IE10 (au moins lors de l'exécution sur Windows7) de la première cellule est plus large que la seconde.

Ce code HTML dans IE 9/Windows 7:

Même code HTML dans internet explorer 10 pour Windows 7:

IE10 table-layout:fixe cassé, si colspan est utilisé

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

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

Personne ne sait solution/solution de contournement pour ce problème?

Mise à JOUR: j'ai demandé à Microsoft de ré-ouvrir mon bug rapporté parce que c'est une violation de la norme du w3c. La réponse est:

"Le problème que vous signalez est par la conception. Internet Explorer utilise uniquement la première série de balises TD pour définir la largeur d'une colonne.".

La norme du w3c (http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout) dit:

Dans la table fixe à l'algorithme de mise en page, la largeur de chaque colonne est déterminée comme suit:

Un élément de colonne avec une valeur autre que "auto" pour la "largeur" de la propriété détermine la largeur de cette colonne.

Sinon, une cellule de la première ligne avec une valeur autre que "auto" pour la "largeur" de la propriété détermine la largeur de cette colonne. Si la cellule s'étend sur plus d'une colonne, la largeur est divisée sur les colonnes.

Toutes les autres colonnes de répartir également les restants de table horizontale de l'espace (moins de frontières ou de l'espacement entre les cellules).

Cela signifie que cette fonction est brisé par la conception dans IE 10. Je recommande d'utiliser un autre navigateur ou de rester avec IE 9...

Même problème existe dans internet explorer 10 sur Windows 8
Le problème est aussi là, si tous les <col>s ont une largeur définie...
Microsoft lui-même déclare que la colgroup définit la colonne de largeurs si la table-layout:fixe est utilisé - voir msdn.microsoft.com/de-de/library/ie/ms531161(v=vs. 85).aspx
Microsoft malheureusement, les marques de la plupart des bugs de se Connecter en tant que "By Design", à moins qu'ils prévoient de les corriger. Ils pensent (bien que ce concept ne parvient pas) que ce qui suggère que cette [airquote]œuvres[/airquote] "Comme prévu" ils ne sont pas "mal". Malheureusement, ce n'juste tiques développeurs off que Microsoft ne semble pas être motivé par le moindre pour résoudre ces problèmes... mais je m'égare...
Nous avons même des problèmes avec IE10. table-layout:fixe, tout d'un coup toutes nos tables d'un kilomètre de large. Nous avons utilisé pour spécifier des largeurs fixes sur le th des balises qui a bien fonctionné jusqu'à ce que IE10.

OriginalL'auteur Michael Wyraz | 2013-03-07

5

Ma solution actuelle est la suivante: le style
```
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  table colgroup { display: table-row; }
  table colgroup col { display: table-cell; }
}
```
Cela rend le navigateur poignée colgroup/col comme tr/td et est similaire à Teemu de la suggestion (mais sans laide html hacks). Les médias sélecteur rend le css ne sont visibles que IE10+

OriginalL'auteur Michael Wyraz
3

J'ai couru dans cette, dans IE9 en fait. La seule solution que j'ai trouvé était, en effet, de mettre en caché mannequin première ligne du tableau:
```
<tr style="visibility: hidden"><td></td><td></td><td></td><td></td></tr>
```
Alors, pour se débarrasser de l'écart qui en résulte, j'applique une marge négative pour l'ensemble de la table. Pas très élégant, mais il semble pour obtenir le travail fait.

Je me demande un peu à ce sujet car nous n'avons jamais eu de tels problèmes dans IE9 avant - l'exemple, j'ai écrit des œuvres dans IE9 (et tous les autres navigateurs, sauf IE10).
Il est difficile de faire le tri, parce que votre HTML a un tas d'autres, liées à des erreurs. Nourrir votre code par le biais d'un programme de validation, et vous verrez ce que je veux dire.

OriginalL'auteur MisterNeutron

J'ai l'habitude de faire comme ça

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

50% pour les 2 colonnes, 33% pour 3, etc.

Cette travaillé pour IE10.

OriginalL'auteur D.Dimitrioglo

Vous devez vous connecter pour publier un commentaire.