0

我不确定这是否是我正在破解的 Blogger 模板的问题，或者我只是忘记了一个简单的 CSS 属性。

我正在为朋友制作一个模板，并试图在菜单栏 div 的右上角显示徽标，它在 Firefox 和 Chrome 中运行良好，但它在 IE9 中呈现在 div 后面。

这是演示的链接： 演示博客

本质上，我所做的是创建了一个绝对定位的 div，其中包含一个内部图像：

<div id="logo2">
  <a href="">
    <img border="0" src="http://1.bp.blogspot.com/-lpZjzviYzAo/T7mNUvXY6QI/AAAAAAAAAcM/XwQS-bO0Hy4/s1600/lovek-hdr.png">
  </a>
</div>

和相关的CSS：

#logo2 {
  position:absolute;
  top: -25px;
  right: -50px;
  z-index: 999;
}

我认为绝对位置加上高 Z-index 的组合可以克服 IE 处理 z-index 的任何问题，但我错了。

我还尝试为菜单栏 div 添加位置（相对）和 z-index (1)，但无济于事。

根据@Dubious 的建议，我添加了以下内容但没有成功（图像仍被剪裁）：

.tabs-outer, .tabs-inner {
    <!-- [if ie 9]>
      z-index: -1;
    <![endif]>
    position: relative;
}
4

1 回答 1

3

旧答案“尝试在菜单栏 div 中添加 -1 而不是 1 的 z-index”

编辑：

好的，在 IE9 开发人员工具中进行了一些摆弄之后，我注意到您的源代码告诉 IE 以文档模式呈现页面：IE7 标准。如您所见，在打开开发工具（并确保开发工具框架处于活动状态）之后，您可以按 alt + 9 来渲染 css，因为它应该在 IE9 中渲染。发生这种情况后，内容将在任何当前浏览器中显示。

那么为什么使用 IE7 文档标准加载页面呢？那么您需要为每个页面使用正确的符合标准的 !DOCTYPE 指令。为此，只需阅读此页面并确保您的 html 文件遵循第一个示例。

有条件的评论

我应该给你一个更好的 IE 条件注释的例子，所以我会在这里更深入一点。IE 条件注释只能在 html 中定义，因为它使用<!-->的是 html 特定代码。因此，为了添加 ie7/ie9/ie 特定的 css，您需要<link>在注释字段中添加一个新的样式表，该样式表将具有 ie 特定的代码。进一步阅读这里。另请注意，由于您遇到的此问题是因为该页面正在呈现 IE7 怪癖模式 css，因此您可能需要使用 ie7 注释而不是 ie9。

我真的希望这能解决你的问题，祝你好运！

于 2012-08-08T01:18:12.617 回答