3

我正在使用 html 和 CSS 向我的博客添加一个下拉菜单栏。

代码来自My Blogger Lab，对颜色等进行了调整。

我的测试站点是： http: //practicedailygratitude.blogspot.com/

我对它在 Chrome 和 Firefox 中的外观感到 100% 满意（下拉菜单实际上仅适用于 About、Images 和 Home DIY；其余的只是链接）。

我在 IE 中遇到以下问题（我尝试了 7、8 和 64 位）：

  1. 在资源管理器中，下拉菜单的背景几乎是透明的（我可以看到它们后面的帖子文本）
  2. 在资源管理器中，下拉菜单发生得如此之快，以至于我无法悬停或选择。
  3. 在 safari 中，链接不活动，并且下拉菜单出现在悬停上。

我已经搜索了两个星期，并尝试了其他帖子的不同调整和建议，但我不知道如何让它在 IE 中工作。

我不使用 IE，但她 30+% 的博客追随者使用，所以我需要做出调整，此时我完全没有想法（而且我已经达到了我的能力）。

我已经能够在 Chrome 和 Firefox 中调整代码以使其完全符合我的要求（下拉菜单悬停在标题中的旗帜横幅上）。

注意：此代码要求将 html 小工具放在博客文章部分的顶部，而不是标题，这就是为什么我更改了一些边距等以使下拉菜单移动并与标题“看起来正确”它背后的图像。

这是我所看到的：

在此处输入图像描述

主题是 Josh Peterson 的 Blogger 中的 SIMPLE。是Blogger中为数不多的选择之一----我没有修改过；我只修改了我在帖子部分上方添加的 1 个 html 小部件，然后有一个模板的高级 CSS 选项卡 ---- 那是我转到高级的地方，然后“添加 CSS”并添加了来自 My Blogger Lab 的 CSS （仅更新颜色和移动，以便覆盖标题）----看起来 CSS 然后将自身添加到 SIMPLE 模板中。

小部件的 html：http: //practicedailygratitude.blogspot.com/2012/09/my-blogger-lab-html-code-for-widget.html

CSS： http: //practicedailygratitude.blogspot.com/2012/09/my-blogger-labs-css-i-modified-for.html

Blogger 中的简单模板 http://practicedailygratitude.blogspot.com/2012/10/simple-template-from-blogger.html

4

1 回答 1

1

我查看了您的代码，首先需要对其进行清理。通过清理，我的意思是标记中的语法错误：http: //validator.w3.org/check ?uri=http%3A%2F%2Fpracticedailygratitude.blogspot.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

这里有很多错误可能导致您遇到的问题。

如果您在清理后仍然看到问题，您可能应该将其视为 IE7 上的常规 z-index 问题。position: relative;如果您将和z-index: 500;放在包含菜单的所有父元素上，则可以解决此问题。因此，div通过div添加positionandz-index规则。由于您的菜单的z-index值为500，因此其父项也必须为该规则定义一个值，该值必须等于或大于子元素 - 在本例中为菜单。这将解决菜单位于内容后面的问题（我已经在站点的当前状态下对其进行了测试）。

附带说明一下，您的页面上声明了以下标签：<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>. 这样做是强制 Internet Explorer 8+ 使用 IE7 兼容模式呈现页面。我认为您希望删除此标签。

让我知道这是否对您有所帮助。

于 2012-10-02T11:11:57.850 回答