Display table, submit et IE > 8

Hello.

Je viens de constater quelque chose de plutôt étrange avec IE > 8.
En gros, un input[type=submit] en display: table se comporte comme si il n'avait pas de value.

Je vous laisse constater par vous même : un exemple en ligne.

J'ai essayé de jouer sur les propriétés font-size, width, height, box-sizing...mais chou blanc à chaque fois

Merci d'avance à ceux qui pourront m'éclairer là-dessus.

J'ai envie de dire que ça m'étonne pas plus que ça.

Tu utilises display:table pour le centrage horizontal avec les marges auto? Pourquoi ne pas utiliser un bon vieux text-align:center sur le parent du bouton?

fvsch a écrit :
Tu utilises display:table pour le centrage horizontal avec les marges auto?

C'est ça. C'est plus expérimental qu'autre chose (vu qu'IE6-7, toussa toussa…), je voulais juste voir si il y avait moyen d'économiser une classe et obtenir un comportement générique.

Je reste quand même curieux de savoir si c'est un bug, ou un comportement couvert par les specs.

Comportement couvert par les specs: j'en doute.
Donc oui c'est sans doute un bug, mais sans doute pas un bug de violation des specs vu que les éléments INPUT/BUTTON c'est un peu du free for all: pour leur appliquer des styles et des comportements relativement complexes et pas descriptibles en CSS, chaque navigateur gère ça à sa sauce.

Pour la petite histoire, dans Firefox un élément tel qu'un INPUT de type submit contient un pseudo-élément accessible avec le sélecteur ::-moz-focus-inner (il sert à peindre un cadre de focus à l'intérieur de l'élément -- un vieux détail d'implémentation). C'est un exemple parmi d'autres de ce qu'on appelle le Shadow DOM: certains éléments HTML du DOM peuvent contenir des éléments enfants et même toute une structure plus ou moins complexe qui n'est pas reflétée dans le DOM (l'élément a son propre DOM interne non accessible en scripting). Un autre exemple intéressant ce sont les lecteurs audio/video natifs dans les navigateurs (m'est avis que certains ont du SVG dans leur Shadow DOM).

Et donc quand tu appliques un display un peu inattendu à un élément de ce genre, ben ça peut donner des résultats bizarres. C'est pas forcément «normal», mais c'est pas très surprenant non plus.

OK. Merci pour les précisions, je sentais bien que le truc était bancal. D'ailleurs, IE n'était pas le seul à avoir un comportement anarchique au final (les marges n'étaient pas prises en compte sous Chrome par exemple). D'ailleurs, j'ai fait le même test, mais en remplaçant mon input par un button[type=submit] avec des résultats tout aussi foireux.

Je ne connaissais pas du tout cette histoire de Shadow DOM (même si on finit plus ou moins par le pressentir ). C'est toujours bon à savoir (et ça me donne encore plus envie de regarder la conf de Anthony Ricaud du Paris Web de cette année).