Test de l’interprétation de ce qu’est la hauteur d’une boite‑ligne (line-box), selon trois navigateurs testés.
Hauteur des boites‑ligne
Le test porte sur des SPAN de classe .text contenant un court texte d’abord, puis ensuite un inline-block en plus. Ils sont plus ou moins imbriqués, et disposent d’une bordure solide, et apparaissent dans un paragraphe P de bordure pointillée. Les SPAN ont un padding. Dans le premier groupe, rien de plus n’est ajouté; dans le second groupe, les SPAN imbriqués contiennent un autre SPAN de classe .pillar (colonne de soutènement), placé juste avant le texte et auquel est appliqué display: inline-block;. D’après la spéficiation CSS 2.1 (l’équivalent CSS 3 est actuellement introuvable, au moins à la date du 20 Mars 2013), la hauteur des boites‑ligne, ne dépend que de la hauteur des lignes de texte et/ou de la hauteur des éléments‑remplacés (replaced‑element) et/ou de la hauteur des blocs‑en‑ligne (inline‑blocks).
The width of a line box is determined by a containing block and the presence of floats.
The height of a line box is determined by the rules given in the section on line height
calculations.
As described in the section on inline formatting contexts, user agents flow inline-level
boxes into a vertical stack of line boxes. The height of a line box is determined as follows:
-
The height of each inline-level box in the line box is calculated. For replaced
elements, inline-block elements, and inline-table elements, this is the
height of their margin box; for inline boxes, this is their 'line-height'.
(See "Calculating heights and margins" and the height of inline boxes in "Leading and
half-leading".)
-
The inline-level boxes are aligned vertically according to their 'vertical-align'
property. In case they are aligned 'top' or 'bottom', they must be aligned so as
to minimize the line box height. If such boxes are tall enough, there are multiple
solutions and CSS 2.1 does not define the position of the line box's baseline
(i.e., the position of the strut, see below).
-
The line box height is the distance between the uppermost box top and the
lowermost box bottom. (This includes the strut, as explained under 'line-height'
below.)
Niveau 1
Niveau 1 Niveau 2 Niveau 1 Niveau 2 Niveau 1 Niveau 2
x Niveau 1
x Niveau 1 x Niveau 2 x Niveau 1 x Niveau 2 x Niveau 1 x Niveau 2
Dans le premier groupe, les SPAN se chevauchent verticalement, et c’est normal, car leur padding n’est pas pris en compte pour le calcul de la hauteur de la ligne, ce sont en effet des inline boxes, pour lesquels seul compte la valeur de line‑height. On peut même les voir déborder du paragraphe vers le bas, ce qui est encore une fois normal, pour la même raison.
Pour le second groupe, les interprétations des navigateurs, divergent.
Opera/Presto (Opera 12.14)
La hauteur des inline‑blocks, ne semble pas contribuer à la hauteur des line‑boxes, bien‑que les hauteurs des inline‑blocks soient correctes. Presto confondrait‑il inline‑block et inline‑box ? En tous les cas, il semble les traiter ainsi lors du calcul de la hauteur des line‑boxes, car il semble ne tenir compte que de leur line‑height, raison pour laquelle ils déborderaient ici des line‑boxes dans lesquelles ils sont pourtant contenus.
Midori/WebKit (Midori 0.4.3)
WebKit calcul un peu comme Presto, avec en plus un débordement à droite, qui ne devrait pas être là (mais c’est un autre sujet).
Firefox/Gecko (Firefox 19.0.2)
Gecko semble être le seul à interpréter assez correctement CSS 2.1. Mais il semble avoir un problème quand‑même : avec la coupure des boites. Sur toute sa longeur, y compris en passant par les coupures, la boite en ligne devrait avoir la même hauteur; ici, si ce qui la fait grandir en hauteur, se trouve après la coupure, il n’applique la hauteur rendue nécessaire par un élément du contenu, que après la position à laquelle cet élément apparait.