Question

嗨，我在IE 10兼容性视图中遇到了网站问题（在IE7视图中，它们也是同样的问题）。最初我在侧边栏后面有一个名为.info-bg的背景div，它假设隐藏在侧边栏.info-area后面，使用position：absolute。但是，在IE7中，看起来背景并未隐藏。让它隐藏的唯一方法是使用position：static，留下一个空白点。让背景完全隐藏（如显示无）不是一个选项，因为当我向下滚动时右侧会加载更多内容。其中，没有.info-bg只返回左侧的空白区域。 Live Site Link

This is when I use position: absolute This is when I use position: static

Answer 1

maikelsabido的回答是有效的，但只涵盖了问题的一半。在IE10呈现时，没有必要支持IE10。很少有人这样做（我的统计数据基于JavaScript / DOM对象检测，而不是用户代理，因此非常可靠，如果您尝试强制覆盖渲染模式，我的网站会触发错误9999）所以只是不要打扰IE10渲染为IE7。但是，要测试IE7，您应该在虚拟机中保留XP的副本。

据说，虽然微软在IE7中做了一个非常小的更新来清理它仍然存在很多问题。您将需要使用 Internet Explorer条件评论样式表，我有一个完整的教程，如何在我的网站上实现...

http://www.jabcreations.com/web/css/ieccss

一旦您为IE7实施了IECCSS，您就不需要使用任何黑客攻击，只需将其定位于IE7即可。

说你的页面布局看起来不像你需要CSS 2级定位。甚至IE 5.0也有可靠的CSS级别1支持如果你知道如何正确地进行基本布局，但是不要感觉不好因为除了我的网站之外我总是看到人们在他们的教程中首先使用{ {1}}代替position。因此，如果您想要更稳定的CSS并限制用于搜索引擎优化目的的定位，我建议您在这里阅读我的CSS 1级教程......

http://www.jabcreations.com/web/css/nested-divisible-elements

如果这样做，将限制您使用CSS级别2 float的需求。使用您的布局我唯一使用的位置是将内容保留在position元素的顶部，然后将菜单放在代码中的内容下面...然后使用body来直观地将菜单放在页面上。如果您禁用CSS（例如Firefox的Web Developer工具栏可以轻松实现这一点，或者Firefox - ＆gt;查看[菜单] - ＆gt;页面样式[菜单] - ＆gt;没有样式）是如何搜索引擎会看到您的信息页。

另外，你真的应该修复你的标题元素。您有两个position和然后多个h4元素。你想把你的页面想象成一份报纸，你现在对于使用h2赢得战争一无所知，但是在首页的顶部，最重要的故事是h1从一棵树中拯救一只猫退休之家。理解HTML的语义可以成为一个强大的工具，结合搜索引擎让更多人找到您的网站，因为您已经让搜索引擎更容易理解您的内容的语义。

我希望这会有所帮助，如果您有任何其他问题，请随时提出。

Answer 2

添加样式规则位置：相对于包装器ID主包装，如

#main-wrap{
    position:relative;
}

并将以下CSS添加到“.info-bg”div

.info-bg{
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    bottom: 0;
    height: 600px; /* change according to your need */
    box-shadow: 0 0 73px rgba(0, 0, 0, 0.15) inset, 4px 0 4px rgba(0, 0, 0, 0.08);  
}

此外，您可以查看此页面，了解z-index属性的实际工作原理 - http://www.tutorialrepublic.com/css-tutorial/css-layers.php

Answer 3

我修复了你在IE7中突出显示的问题。但是我需要你看到这个要点https://gist.github.com/anonymous/6607075并尝试在你身边。

由于我没有你的Wordpress主题，所以很难解决这个问题。

无论如何，关于要点（https://gist.github.com/anonymous/6607075）

对于css，请查看第108行的代码。对于#info-wrapper
对于html，在第94行，我添加了<div id="info-wrapper">

看看这是否解决了这个问题？如果没有，请在评论中告诉我。

-

编辑：您可以下载我在IE7中测试过的文件here at wetransfer

Answer 4

您可以将其放在网站的部分：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

这将禁用兼容模式并停止弄乱您的网站。

IE7位置绝对问题

4 个答案: