我在CSS布局中做错了什么？

Question

我在这里做了这个布局：http://www.2xfun.com/

它使用了一些css3效果和每个浏览器都不支持的东西，但如果它们不能正常工作。

问题在于我真的试图让旧版浏览器中的基本工具保持正常运行。

我没有使用任何负面边距，我知道在IE 6等中出现问题

但是，如果我在IE 6中看到它，布局会变得混乱。元素完全乱码。

我在哪里失败得那么厉害？我不需要分析我的所有错误，因为我知道它到目前为止还不完美。但是什么定位css指令是错误的，它们会导致IE6搞乱一切？

所以我的问题是：

• 导致此类遗留不兼容的属性或属性组合
• 有没有好的工作（css重置，javascript修复）？

附录：

这就是ie6中页面的样子

在ŠimeVidas的javascript修复之后

这就是它在现代浏览器中的外观和外观

Answer 1

有位置的所有东西：绝对，放置顶部和左侧位置，而不仅仅是顶部。所有具有浮动和边距的东西，设置为显示：内联。这至少可以解决很多问题。我还推荐一种重置造型，比如Meyer's。对于IE6，你的代码看起来有点欠定义，这是一个挑剔的代码。

Answer 2

将其放在页面上：

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

现在如何在IE6中查看页面？

项目主页：http://code.google.com/p/ie7-js/

使用入门：http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

Answer 3

我们走了..

将此规则的规则添加到普通样式表中 - @neXib是正确的：

.headcontainer, .headbar {
    left:0
}

如果不这样，即使在IE7中，您的网站也存在问题。

上面的代码片段，加上我创建的巫毒魔法粉尘，修复了紧迫的IE6问题：

<!--[if IE 6]>
<style type="text/css">
.headbar-spacer {
    width: 169px
}
.content div.right {
    padding-right: 0
}
.content h2 {
    margin: -30px 0 0 106px;
    width: 535px;
    padding: 0 0 12px 0
}
</style>
<![endif]-->

我评论了这个：

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c90156b67654829"></script>

似乎以某种方式使IE6将白色视频容器跳到窗口顶部。因此，如果需要，请将其包含在条件注释中。

您的网站在IE6中显示以上更改（忽略此图片的低色深）： 好多了！

您可以进行改进：

• 试用DD_belatedPNG来解决.png透明度问题。
• 制作.headbar上的CSS渐变的图像版本。目前，IE8没有渐变。 IE支持它自己的特殊类型的渐变，您可以考虑提供这些规则（-ms-filter / filter + gradient？）。
• 冗余点：修复Notice: Undefined index: jsfix in /home/2xfun/html/application/views/vanilla.php on line 13。显然你只是把它用于测试。我建议通过在行前加@来抑制PHP错误。
• 在脸上踢IE6。两次。