为什么我的布局仅在 Firefox 和 IE8（不是 9）中被破坏？

Question

我今天注意到我几个月前完成的一个网站在 Firefox 和 IE8 上的显示效果不佳（在 IE9 中运行良好）。它现在已经很老了，我很确定我当时测试了浏览器兼容性，但我想确实会出错。

问题是我似乎无法理解问题所在。基本上我有一个固定位置的左侧浮动边栏，但它在 FF 和 IE8 上呈现在右侧（在其容器之外）。我总是可以从头开始重新构建布局（它使用骨架网格系统），但仍然想了解问题。

Example page that's broken on the website.

尝试用各种浏览器打开，自己看看。另外，如果有人在FF上看到它，我也很感兴趣。

非常感谢！

编辑：我不是要求进行整个调试。只要有人知道这个问题。

Edit2：验证器链接在这里无关紧要。我已经检查过了，它们基本上是 css 的前缀和 html 的 CMS 相关的前缀。

Edit3：我修复了它并准备了一个完整的答案来发布，但由于我是新用户，我无法在接下来的 7 小时内回答我自己的问题......所以这里是：

我只是根据您的回答中的提示整理了整个事情（谢谢 你！）。

基本上，这与浏览器如何处理浮动有关 固定元素。想象一下我们正在处理连续的“float:left” 元素，大多数网格系统（960gs，引导程序， 等等）。

以下是浏览器在不固定的情况下处理这些元素的方式 定位：http://jsfiddle.net/cPjdK/ 和 float:right ： http://jsfiddle.net/cPjdK/1/

现在，如果我们有一个很长的第三列并且想要修复第一列怎么办？ （我的例子）？好吧，它基本上禁用了浮动，因为固定 元素不在流中。 http://jsfiddle.net/cPjdK/9/

所以你必须绝对定位它们（​​或者在我的情况下有边距） http://jsfiddle.net/cPjdK/6/

现在我的网站呢？固定元素不再浮动，并且 整个网格系统有点崩溃。解决这个问题似乎是 长期工作。但是，由于某种原因，替换了我的“float:left”属性 在带有“float：right”的浮动元素上基本上修复了它。为什么这样做 修理它？为什么它不能在 FF 和 IE8 上运行，但在 IE9 上看起来很好 和 Chrome。

我不知道。

但现在看起来不错（经过一些调整）而且我已经收到了报酬 所以...

问题已解决，但问题未得到解答，抱歉...

Answer 1

你有一个 FIXED 定位元素，但没有给它任何坐标。

试着给它类似的东西：

#side-right{
position:fixed;
top:0;
left:0;
}