Et merde, ce code CSS, pourtant pas tellement exotique, s’affiche de façon drastiquement différente dans chaque navigateur (Firefox, Chrome, IE, Edge, Safari).
(Dans le code, le CSS affecté sur body et html ne servent qu’à centrer le <div>, on peut le virer)

Pour le coup, si j’avais à dire lequel avait raison, je dirais soit Edge, soit Safari.

Si je prend un <div> et que je lui met une outline, elle se met autour. Si je met un outline-offset négatif, logiquement, la bordure « implose » sur le <div>.

C’est ce qui se passe avec Edge.

Safari met du vert au centre aussi, mais le laisse également au bord. IE ne supporte pas outline-offset.
Chrome affiche un truc chelou (#chromeIsTheNewIE). Et Firefox semble bien décaler le outline, mais on dirait qu’il fait le rendu comme deux blocs (afin d’avoir l’effet du "inset") : ce qu’il affiche semble être le résultat de sa mécanique interne différente des autres. Et ici, les deux blocs s’affichent pas au même endroit…

— (permalink)