Firefox下样式设置宽度奇怪现象

前阵子在项目实践中遭遇了一个颇为奇特的现象。

在我们的网页中，有一个数据列表，呈现为table形式，被嵌套在一个div窗口内。其结构大致如此，代码示例如下：

``

`

``

我们为container和grid分别设置了样式。对于container，样式为 `container {width:100%; margin:10px;}`，对于grid，样式为 `grid {width:100%}`. 在Internet Explorer浏览器中，一切表现正常。在Firefox浏览器中，container的实际宽度会超过100%，导致出现横向滚动条。这一现象的原因是Firefox在计算宽度时，将margin计算在内，实际宽度达到了100%+20px，这就超出了屏幕的宽度。

为了解决这个问题，我们曾尝试移除div的margin定义，而采用body的padding来设置。当浏览器窗口尺寸减小时，在Firefox下使用如98%宽度的定义可能会再次引发问题，因为98%+20px可能会超过100%。

抱着试一试的心态，我对container的样式进行了调整，将其改为 `container {width:100%-20; margin:10px}`。再次在Firefox中测试时，惊奇地发现问题已经解决，页面表现与IE下一致。这样的定义在常理看来似乎是错误的，却有效地解决了Firefox将margin计入宽度的问题。进一步尝试发现，无论100%减去任何数值，都能达到类似的效果。尽管我查阅了一些资料，但仍然无法明确其原因。

或许这就是一个浏览器渲染的特殊性，也可能是一个尚未被广泛认知的bug。在此，我将遇到问题的代码、测试结果以及相关截图整理上传。希望高手能指点迷津，解开这个谜团。我也将数据部分的内容整理如下：

数据1

数据2

数据3

数据4

...（中间空行）

数据5

数据6

数据7

数据8

...（再次空行）

（注：Ctrl+A全选功能已启用）