2010-12-02 23 views
1

Ce html:Pourquoi un attribut align se propage de td vers une table contenue dans IE uniquement?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head><title>TD align test</title></head> 
<body> 
<table width="100%"> 
    <tr><td>aligned left</td><td align="right">aligned right</td></tr> 
    <tr><td colspan="2" align="center"> 
    <table width="100%" cellspacing="0" cellpadding="0"> 
     <tr><td>should be aligned left</td></tr> 
    </table> 
    </td></tr> 
</table> 
</body> 
</html> 

aligne le "devrait être aligné à gauche" centrée dans IE (6 & 8) et Opera, mais à gauche dans Firefox (3.6 & 4 beta) et le chrome. Les premiers semblent propager l'alignement du td à la table contenue.

Quelqu'un peut-il expliquer cette différence? Et quel comportement est plus conforme aux normes?

(Vous pouvez l'essayer à http://ysth.info/tdalign.html.)

+0

Est-ce juste une étude de cas? parce que vous n'avez pas besoin d'aligner le centre lorsque le contenu est 100% large. Mais la question est en effet intéressante. –

+0

@Gaby: oui, c'est juste un cas simple démontrant l'effet. Je voudrais connaître les forces en jeu ici pour permettre de trouver tous les problèmes similaires dans un grand nombre de code de table-heureux, pas seulement les problèmes évidents apparents. – ysth

Répondre

1

Vous pouvez jeter un oeil à http://www.docsteve.com/DocSteve/TechNotes/IE6_cascade_test.html pour pourquoi il pourrait se produire.

Le fait est qu'il est un autre pépin IE (d'incompatibilité avec d'autres navigateurs). La seule chose que je peux suggérer, est de la remplacer, en spécifiant explicitement l'alignement que vous voulez ..

Si vous utilisez des classes et la text-align:center vous remarquerez que tous les navigateurs IE se comportent comme le fait avec l'attribut align, donc pas sûr correct/faux avec ça.

+0

Hmm. would 'table {text-align: left}' être un correctif générique? (Je n'ai pas d'éléments) – ysth

+0

@ysth, oui mais combiné avec 'td {text-align: inherit;}', il devrait couvrir tous les cas. Mais vous aurez besoin d'utiliser un attribut 'class' ou' style' pour le remplacer car 'align =" left "' ne fonctionnera pas (* il est surchargé par ces règles *) –

+0

Je n'ai pas compris la dernière partie ; pouvez-vous clarifier, peut-être avec un exemple? – ysth

1

L'attribut align est deprecated, même si je savais comment le gérer, je ne serais pas à l'aise d'essayer de négocier comme les navigateurs plus récents peuvent avoir de plus en plus de problèmes pour l'afficher de manière cohérente.

Pour votre cas, vous pouvez définir simplement les classes .right et .left (pour passer outre une cascade .right) et les virer de bord sur les lignes, les tables ou les cellules comme bon vous semble.

+0

déprécié ne devrait pas être un problème; déprécié signifie simplement que les agents utilisateurs qui ne supportent que les versions html futures ne le supportent plus, cela ne signifie pas que les agents utilisateurs qui prétendent supporter 4.01 aient carte blanche pour casser les choses obsolètes. Cela dit, le brouillon html5 supprime align, et le fait même qu'il soit déprécié indique qu'il y a de bonnes raisons de ne pas l'utiliser. – ysth