Étrange phénomène de largeur de réglage du style sous l'échange Firefox_Experience

Il y a une liste de données sur la page, qui est un tableau. Elle est placée dans une fenêtre div avec la structure suivante :

Définit le style du conteneur #container {width:100 %; margin:10px;}
Définissez le style de la grille #grid {width:100%}

Les résultats des tests sont normaux dans IE Sous Firefox, la largeur réelle du conteneur dépassera 100 %. et une barre de défilement horizontale apparaîtra car Firefox compte la marge. Entrez la largeur, qui est en fait égale à 100%+20px>100%.
Bien sûr, vous pouvez supprimer la définition de marge du div et utiliser le remplissage du corps à la place. Cependant, il existe d'autres contenus sur la page qui doivent occuper la page entière.
Donc, dans le passé, afin de résoudre ce problème, les divs étaient définis avec une largeur : 98 % dans Firefox. Cela semblait résoudre le problème, mais si la fenêtre du navigateur devenait plus petite, 98 %+20 px sous Firefox pourrait l'être. supérieur à 100 % et une barre de défilement horizontale apparaît.

Pour essayer, j'ai changé le style du conteneur en #container {width:100%-20; margin:10px}, puis je suis allé sur Firefox pour y jeter un œil, haha, il s'est avéré que c'était le cas. normal, c'est pareil que sous IE, c'est vraiment étrange, la définition de width : 100%-20 devrait être fausse ! Mais cela a résolu le problème de Firefox, y compris la marge. Je l'ai essayé plus loin et j'ai constaté qu'elle pouvait être réduite de 100 % à n'importe quel nombre. Après avoir vérifié certaines informations, je n'ai toujours pas compris la raison.
C'est peut-être juste un bug, haha ! Peut-être qu'un expert connaît la raison. Je l'ai testé moi-même et publié le code et les captures d'écran :