Blogger 中的 CSS 和 HTML 下拉菜单 --- 在 IE 中悬停时没有行为；但在其他浏览器中完美

Posted 2023-03-06

【中文标题】Blogger 中的 CSS 和 HTML 下拉菜单 --- 在 IE 中悬停时没有行为；但在其他浏览器中完美

【英文标题】：CSS & HTML drop down in Blogger --- Not behaving when hovering in IE; but perfect in other browsers

【发布时间】：2012-09-22 16:24:21

【问题描述】：

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

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

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

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

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

在资源管理器中，下拉菜单的背景几乎是透明的（我可以看到它们后面的帖子文本） 在资源管理器中，下拉菜单发生得如此之快，以至于我无法悬停或选择选项。 在 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

【问题讨论】：

无论版本如何，它都适用于 IE。确保您没有处于怪癖模式。 （F12 检查）

非常感谢您的回复 Caelea。我检查了一下，我符合 IE 7 标准。我在上面附上了一个屏幕截图----当我尝试做出选择时，下拉菜单（有时）会立即出现。它还在 IE 中显示了一个在其他浏览器中不显示的 alt 标签。我仍然无法悬停或从下拉列表中选择任何内容——它消失得太快了。我仍然不确定我做错了什么，它在 IE 中对你有用，但对我没有。我应该使用什么文档类型？可能与此有关吗？谢谢。

这需要关闭，因为过于本地化。如果没有图像或外部网站链接就无法提出您的问题，则无法在此处提出。我们不必打开您的网站并检查其来源即可回答您的问题。

@Emily M doctype 还可以，您无能为力，毕竟它是 blogspot，您无法更改它，因此它与用于该菜单的插件有关。不幸的是，我不擅长 javascript。我希望有人能比我更好地帮助你。

【参考方案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 并添加position 和z-index 规则。由于您的菜单的z-index 值为500，因此其父级也必须为该规则定义一个值，该值必须等于或大于子元素（在本例中为菜单）。这将解决菜单位于内容后面的问题（我已经在网站的当前状态下对其进行了测试）。

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

如果这对您有帮助，请告诉我。

【讨论】：

谢谢！我今天会试试这个，让你知道！

谢谢！我尝试了几个小时。我认为错误是指原始博客模板或我直接复制的小部件的 html 或 CSS。我已经尝试过，但我认为我的技能不足以进行编辑。当我试图在博客模板中进行编辑时，我崩溃了。我尝试更新 Z-index 和位置（您的意思是编辑 CSS 并添加显示在下拉列表顶部的任何元素（如帖子正文、帖子标题）的属性，还是只为现有的菜单元素执行此操作？ ) 只有当博客文章被下移时，下拉菜单才让我在 IE 中悬停/选择。谢谢。

很抱歉，如果无法访问这些文件，我将无法提供更多帮助。您是构建这个主题还是在某个地方下载了它？

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

小部件的 html：practicedailygratitude.blogspot.com/2012/09/… CSS：practicedailygratitude.blogspot.com/2012/09/… Blogger 中的简单模板：practicedailygratitude.blogspot.com/2012/10/…