Firefox_Experience交換時のスタイル設定幅の奇妙な現象

ページ上にはテーブルであるデータ リストがあり、次の構造を持つ div ウィンドウに配置されます:

コードをコピー コードは次のとおりです。

....リストデータ.. ..

コンテナのスタイルを設定します #container {width:100%; margin:10px ;}
グリッドのスタイルを設定します。 Style #grid {width:100%}

テスト結果は IE では正常です。Firefox では、コンテナの実際の幅は 100% を超え、水平になります。 Firefox では余白も幅にカウントするため、実際には 100% (20px>100%) になります。
もちろん、div のマージン定義を削除し、本文のパディングを使用して設定することもできますが、ページ上にはページ全体を占有する必要がある他のコンテンツがあります。
以前は、この問題を解決するために、Firefox の div に width: 98% を定義していました。これで問題は解決したように見えますが、ブラウザ ウィンドウが小さくなると、Firefox では 98% 20px になります。水平スクロール バーが表示されます。

試しに、コンテナのスタイルを #container {width:100%-20; margin:10px} に変更してから、Firefox で調べてみました。通常です。IE と同じです。本当に不思議です。width: 100%-20 の定義が間違っているはずです。しかし、Firefox の問題はマージンも含めて解決したので、さらに試してみたところ、100% から任意の数値まで減らすことができることが分かりましたが、情報を調べても原因がわかりませんでした。
もしかしたらただのバグかも知れません（笑）！もしかしたら専門家ならその理由を知っているかもしれない。私は自分でテストし、コードとスクリーンショットを投稿しました:

<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" cellpacing="0" bgcolor="#FF0000"> <table style="width:100%" border="0" cellpadding="0" cellpacing="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>