Question

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

我正在为一位朋友制作一个模板，我正试图在菜单栏div上方的右上方显示徽标，它在Firefox和Chrome中运行得很好，但它在IE9中的div后面呈现。< / p>

以下是演示的链接： Demo blog

基本上，我所做的是创建一个绝对定位的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指数的组合将克服IE处理z-index的任何问题，但我错了。

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

Per @Dubious'建议，我添加了以下内容但没有成功（图片仍被剪裁）：

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

Answer 1

旧答案＆＃34;尝试将z-index为-1而不是1添加到您的菜单栏div＆＃34;

修改

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

那么为什么页面加载了IE7文档标准？那么你需要为每个页面使用正确的符合标准的DOCTYPE指令。要做到这一点，请阅读this page并确保您的html文件遵循第一个示例。

条件评论

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

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

IE9和Blogger的CSS分层问题

1 个答案: