0

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

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

网站上损坏的示例页面。

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

非常感谢！

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

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

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

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

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

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

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

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

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

我不知道。

但它现在看起来很好（经过一些调整）而且我已经得到了报酬，所以......

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

4

1 回答 1

1

You have a FIXED positioned element without giving it any coordinates.

Try giving it something like:

#side-right{
position:fixed;
top:0;
left:0;
}
于 2012-07-19T13:06:30.943 回答