Mauvaise disposition de la table dans IE (7)

StackOverflow https://stackoverflow.com/questions/197266

Question

Vous trouverez ci-dessous le code d’un code HTML simple avec un tableau. En FF, cela ressemble à ce que je pense, dans IE7 ce n'est pas le cas. qu'est-ce que je fais mal?

Et comment puis-je résoudre ce problème? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <TITLE>test</TITLE>
    </head>
    <body>
        <table  id="MainTable" cellspacing="0" cellpadding="0" border="1">
        <tbody>
            <tr>
                <td colspan="4">
                    <div style='width:769; height:192;'>192
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" valign="top">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td valign="top" >
                    <div style='width:190; height:100;'>100
                    </div>
                </td>                           
            </tr>
            <tr>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>
Était-ce utile?

La solution

Je suppose que vous vous plaignez de la hauteur minimale de la ligne du milieu (celle qui contient uniquement des cellules planifiées) et de la hauteur agrandie des lignes adjacentes pour compenser, en laissant des espaces entre les div.

IE ne peut pas calculer la hauteur optimale des lignes lorsque celle-ci ne contient que des cellules de lignes. La solution habituelle lorsque vous ne pouvez absolument pas le modifier pour vous débarrasser de rowspan consiste à ajouter une colonne "factice" de 1px sur un côté du tableau, contenant des cellules vides, chacune avec la "hauteur" définie à la hauteur de la ligne.

Mais oui, selon ce que vous envisagez de faire avec cela, une mise en forme CSS pourrait bien être plus appropriée. S'il s'agit vraiment d'une disposition à pixels fixes pour tout comme dans cet exemple, le positionnement absolu pour chaque div sera beaucoup, beaucoup plus facile.

Autres bits: les valeurs de largeur / hauteur CSS requièrent des unités (supposées être "px"); valign / cellspacing / etc. peut être plus facilement fait dans une feuille de style même si vous utilisez des dispositions de tableau; un DOCTYPE en mode standard peut éviter certains des pires bogues de l’IE (bien que ce ne soit pas le vieil ancien, il n’est pas lié à CSS).

Autres conseils

Pour commencer, vos valeurs CSS doivent avoir des unités, par exemple. width: 190; doit être width: 190px;

complètement d'accord, vous pouvez jeter un coup d'œil au blueprint CSS ou à d'autres frameworks CSS pour obtenir de l'aide

À première vue, il semble que IE7 supporte mal ce type de formatage. Au début, j’allais proposer de supprimer les divs et de déplacer le formatage (largeur et hauteur) directement sur le TD, mais j’ai essayé et je ne semble pas résoudre le problème.

Je suppose que ce n’est pas une bonne solution, mais serait-il possible de remplacer les cellules d’envergure par un nombre plus important de cellules séparées par une bordure invisible? Cependant, cette solution échoue si la taille du texte dépasse la taille de la cellule supérieure.

Le choix de Doctype (4.01 Transitional sans identificateur système (url)) déclenche le mode Quirks dans IE, ce qui le rend très incompatible avec les autres navigateurs.

Basculer vers: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Ou du moins: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

(et, bien sûr, valider mais le HTML et le CSS (qui sélectionneraient les unités manquantes sur vos valeurs de longueur)).

Vous devriez absolument aller avec CSS. Les tableaux ne doivent JAMAIS être utilisés pour la mise en page.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top