É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 :

Copier le code<.> Le code est le suivant :

.List data....< /table>

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 :

tester<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <div style="width:200px; overflow-y:auto; background:#efefef; border:2px solid #FF0000"> <div style="width:100%-20; margin:8px" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000"> <table style="width:100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#333333"> <tr> <td bgcolor="#FFFFFF">数据1</td> <td bgcolor="#FFFFFF">数据2</td> <td bgcolor="#FFFFFF">数据3</td> <td bgcolor="#FFFFFF">数据4</td> </tr> <tr> <td bgcolor="#FFFFFF">数据5</td> <td bgcolor="#FFFFFF">数据6</td> <td bgcolor="#FFFFFF">数据7</td> <td bgcolor="#FFFFFF">数据8</td> </tr> </table> </div> </div>
[Ctrl+A pour tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter ]