IE ne respecte pas les td largeur

J'ai une table de base de mise en page qui est divisé en quatre colonnes, deux d'entre eux pour le rembourrage des fins. Dans la plupart des navigateurs, il fonctionne très bien, mais au moins sur IE9 en mode normal et en mode de compatibilité les cellules ne sont pas de la taille qu'ils sont censés être.

J'ai essayé de définir la largeur à la fois des caractéristiques et des styles CSS mais ni semble aider. Voir tripoter pour une démonstration.

Je veux:

+------------------------------------------+
|  320          | 20 | 39   |  320         |
|               |    |      |              |
+------------------------------------------+

J'obtiens: (arrondi des valeurs décimales)

+------------------------------------------+
|  324          | 19 | 34   |  321         |
|               |    |      |              |
+------------------------------------------+

Avec le contenu réel au lieu de l'espace réservé trucs la différence est encore plus exagéré, la colonne la plus à gauche étant 357 et la plus à droite 299 pixels de large.

J'ai d'abord eu seulement deux colonnes avec un rembourrage sur les bords, mais passé à la version actuelle comme une tentative de correction. Il n'a eu aucun effet.

C'est pour une newsletter HTML donc, en utilisant une mise en page sans tableaux n'est pas une option.

Je ne vois pas le problème, mais je suis également en cours d'exécution IE9. -- D'une part, un tableau n'est vraiment pas l'idéal tag à utiliser pour ce type de contenu. Vous devriez vraiment être le style de la vrd et peut-être utiliser le style float.
Oui, en vérité, les tables sont une mauvaise chose à utiliser en raison de la façon dont ils travaillent. Vous pouvez garantir un bon résultat avec des divs, cependant.
Merci, mais avez-vous essayé d'utiliser les divs flottants dans l'e-mail en HTML? Ils ne fonctionnent pas dans la plupart des clients de messagerie.
Pour moi, ce problème a été lié à un bug dans les fichiers de définition de navigateur. Assurez vous que les plus récentes .NET framework est installé éclairci la question.

OriginalL'auteur Kaivosukeltaja | 2011-05-25

3

Dans le passé, j'ai trouvé que c'était pratiquement impossible problème à résoudre, à moins que vous laissez un de vos éléments de la table sans une largeur fixe.

Si vous le faites, alors j'ai trouvé cette colonne sera celui qui redimensionne, tandis que le reste devrait prendre la taille que vous demandez.

Ce n'est pas idéal, mais au moins il est raisonnablement prévisible et contrôlable.

OriginalL'auteur Spudley
1

Permettrait de voir votre CSS et HTML. Mais n'oubliez pas de frontières compter lors de la mesure de la largeur totale du tableau.

marge de + bordure + rembourrage + largeur = largeur.

Aussi, assurez-vous que vous n'avez pas de n'importe quel élément dans l'une de ces cellules, qui est plus grande que la largeur de la cellule.

Le violon contient le HTML, le CSS n'est pas pertinent que le problème peut être reproduit sans elle. Il y a un seul 1px frontière dans le 20px colonne large, et pas de marge ou de rembourrage ou de l'un d'eux.
Oh, et aucun des éléments à l'intérieur de la cellule dépasse 320px.

OriginalL'auteur David
1

J'ai enfin trouvé une solution à ce problème. Les quatre cellules elles-mêmes étaient très bien, mais ce code contenant le bulletin de titre et à la pénétration il le rompit:
```
<tr><td colspan="4">Some long text here</td></tr>
```
Je l'ai changé pour cela et il a commencé à travailler:
```
<tr><td colspan="4" width="700">Some long text here</td></tr>
```
La grande largeur de colonne est de 700 pixels de si oui ou non je la forcer, mais si je ne le fais pas, la largeur de la colonne unique cellules se foiré. Je pense que cela est clair bug dans IE.

OriginalL'auteur Kaivosukeltaja

<table width="699" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="320" height="50" valign="top"><!--test-->&nbsp;</td>
    <td width="20" valign="top"><!--test-->&nbsp;</td>
    <td width="39" valign="top"><!--test-->&nbsp;</td>
    <td width="320" valign="top"><!--test-->&nbsp;</td>
  </tr>
</table>

cela devrait fonctionner

Oui, vider tout le contenu sera les cellules de la bonne taille, mais ce genre de défaites le but de l'ensemble newsletter... 🙂

OriginalL'auteur Dontlose

Vous devez vous connecter pour publier un commentaire.