IE9和Blogger的CSS分层问题

我不确定这是否与Blogger模板存在问题，或者我只是忘记了一个简单的CSS属性。IE9和Blogger的CSS分层问题

我正在为朋友制作模板，并试图在menubar div上方右上角显示徽标，并且它在Firefox和Chrome中运行得很好，但它在IE9中的div后面呈现。

这里是链接到演示： 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指数，但我错了。

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

每@Dubious'的建议，我说没有成功以下（图像仍裁剪）：

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

来源

2012-08-08 espais

老答案“尝试添加-1的z-index的，而不是1你的菜单栏格”

编辑：

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

那么为什么页面加载IE7文档标准呢？那么你需要为每个页面使用正确的符合标准的！DOCTYPE指令。要做到这一点，请阅读this page并确保您的html文件遵循第一个示例。我应该给你的IE条件注释一个更好的例子

条件注释

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

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

来源

2012-08-08 01:18:12 JonahAaron

这样做实际上隐藏了菜单... – espais 2012-08-08 01:20:04

我明白了......我没有想到在Chrome中检查它，实际上是在奇怪地修复IE中的问题。 – JonahAaron 2012-08-08 01:33:22

您可以尝试添加IE9条件注释（http://stackoverflow.com/a/7364911/1073053）以仅为IE9添加-1的z索引。 – JonahAaron 2012-08-08 01:46:05

IE9和Blogger的CSS分层问题

回答

相关问题