css - IE9 中的 CSS 额外空间问题

Question

我的网站是跨浏览器兼容的，但在 IE9 中它显示了导航和内容部分之间的额外空间。

你可以在这里看到问题。

我该如何解决？

Answer 1

您会得到很多空白，因为您使用的是 position:relative ，然后使用 clear="all" 标记。这会将您的所有内容推低到此之下。尝试使用绝对定位 (position:absolute;) 代替并使父容器 position:relative;

不过，我认为您在这里要担心的还有很多。您的编码是一团糟，并且很难查明错误（尽管我认为就是这样）。我建议把你所有的 CSS 放在一个单独的 style.css 样式表中，并考虑对 javascript 做同样的事情。

此外，您的脚本中有161 个错误和194 个警告。（请访问http://validator.w3.org/亲自查看）。这些错误会给你带来各种各样的问题，并且很难让所有东西都按照你的喜好进行布局（谷歌也会惩罚你的搜索引擎结果）。我知道有很多错误，但是通过并修复它们并不会那么糟糕，因为大多数都是重复的。您还将学习各种新事物:) 希望对您有所帮助！

Answer 2

造成空间的是divwith id="navBreadCrumb"，因为它的上边距为190px. div边距与外部元素一起折叠并将with向下推id="new_main"。然后您使用相对定位使内容显示90px更进一步。

如果您删除边距和相对定位，您就可以摆脱100px空白空间。