使用纯CSS的Chrome和Firefox中的CSS宽度wierdness

首先，我还是CSS新手，所以我希望我没有做过任何可怕的蠢事

基本上，我有一个我正在使用的设计，它的宽度在Google Chrome中播放，而它在Firefox中的效果与预期一样

以下是我所做工作的链接：以及屏幕截图：

• 火狐：
• 铬：

如果你看一下页面源代码，我还没有在自己的CSS中做任何改变（我把它全部注释出来只是为了确定），所以我猜我使用的完全是错误的，因为他们自己的网站在Chrome上呈现得很好

---

此外，使用Chrome的开发工具检查元素时发现，应该相邻的div元素的宽度加起来小于父元素的宽度。而且那里似乎没有缓冲区或填充。此外，如果我手动将宽度减小到非常非常小的程度，Chrome似乎可以神奇地修复所有问题。

问题是在子div之间渲染了一个空格。 问题既不是边距，也不是填充-实际上是由HTML代码中div标记之间的空白引起的

将标签直接相邻放置，没有任何空格，您的问题将得到解决；）

确实很奇怪。我在chrome中检查过，确实父容器比子容器宽。pure-g-r容器为1141.796875px，其两个子容器合计为761.1875+380.59375=1141.78125 px。我也找不到任何边距或填充物。哇，什么！？事实上就是这样。这到底是什么？D:所以基本上我必须缩小HTML，否则Chrome会崩溃？这似乎是一个非常糟糕的决定。我以前也没想过。我的div标签之间总是有空格。IE中的空格和chrome中的空格是一样的；）我认为这里的关键是div的内联样式。代码中内联样式元素之间的空白在页面上呈现为一个空格。如果你仔细想想，就不会觉得奇怪了。如果在两个自然内联元素（如SPAN或IMG）之间写入空格，则页面上会出现一个呈现的空间。我猜这些浏览器以同样的方式解释内联样式DIV元素之间的空白。但这是我第一次真正注意到，也不确定我会推荐什么解决方案。我只是切换到Bootstrap，它以不同的方式处理div：）我使用纯的不仅仅是脚手架，所以没什么大不了的。另外，NetDNA CDN的小型引导也没有那么大。

<!--whitespace in HTML = renders as a space between the divs-->
    <div></div>
<div></div>
<!--no whitespace in HTML = renders edge to edge-->
<div></div><div><div>