Question

我正在开发一个纯CSS下拉菜单。（IE6现在对我来说并不重要。）

我将所有内容都放在“包装”div中以进行居中。

该页面在“#wrapper”中有4个div，第一个是“＃topbar”，第二个是“#nav”，第三个是“#content”框，第四个是“#footer”。

“＃content”和“#footer”div具有绝对定位，可以在子菜单暴露时阻止它们向下跳跃。这适用于IE8和Chrome和FF，但IE8的兼容模式显示IE7会将“#content”和“#footer”div渲染到居中列的左侧。此外，绝对定位用于将页脚保持在页面底部。删除它会修复ie7错误，但是当子菜单暴露时，它会导致一切都向下移动。

有没有办法在没有绝对定位的情况下修复IE7在底部div上渲染左边距？还是用它？

我更喜欢纯CSS。

编辑：

信不信由你，我正在使用一堆span元素，而不是ul或div。我应该使用ul / li结构吗？我发现它是额外的代码。

Answer 1

您是否考虑过将div设置为relative并将子菜单设置为absolute相对于其容器？

ul.menu li             { position:relative; overflow:auto; }    
ul.menu li ul.sub_menu { position:absolute; z-index:10; top:somePixelValueThatClearsTopListItem; }

Answer 2

如果IE6不重要，您是否考虑过忽略IE7？

无论如何，由于您没有发布您的代码，因此quickfix将使用IE conditional comments并将其置于其他CSS定义/链接之下。

<!--[if IE 7]>
<style type="text/css">
  .className {position: static;/*or relative*/}
</style>
<![endif]-->

为什么CSS下拉菜单会让内容跳下来？什么修复了这个？

2 个答案: