0

嗨，我在 IE 10 兼容性视图中遇到了网站问题（在 IE7 视图中，它们也是同样的问题）。最初我在侧边栏后面有一个名为 .info-bg 的背景 div，它假设隐藏在侧边栏 .info-area 后面，使用位置：绝对。但是，在 IE7 中，背景似乎没有隐藏。让它隐藏的唯一方法是使用位置：静态，它会留下一个空白点。让背景完全隐藏（如不显示）不是一个选项，因为当我向下滚动时，右侧会加载更多内容。其中，没有 .info-bg 只会在左侧返回一个空格。现场链接

这是我使用 position: absolute 这是我使用位置的时候：静态

4

4 回答 4

1

maikelsabido 的回答是有效的，但只涵盖了问题的一半。当它呈现为 IE7 时，支持 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 ，但不要感到难过，因为除了我的网站之外，我总是看到人们在他们的教程中一头扎进使用position而不是float. 因此，如果您想要更稳定的 CSS 并限制 SEO 的定位，我建议您也阅读我的 CSS 级别 1 教程……

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

如果你这样做，它将限制你使用 CSS level 2 的需要position。对于您的布局，我唯一使用位置的是将内容保持在body元素的顶部，然后将菜单放在代码中内容的下方......然后用于position直观地将菜单放在页面上的位置. 如果您禁用 CSS（例如 Firefox 的 Web Developer 工具栏很容易做到这一点，或者 Firefox --> View [menu] --> Page Style [menu] --> No Style），这就是搜索引擎如何看待您的页面。

此外，你真的应该修复你的标题元素。你有两个h4，然后是几个h2元素。你想把你的页面想象成报纸，你的页面目前没有关于赢得战争的内容，h1但在首页的顶部，最重要的故事是h4从养老院的树上救出一只猫。了解 HTML 的语义可以成为与搜索引擎相结合的强大工具，可以让更多人找到您的网站，因为您使搜索引擎更容易理解您的内容的语义。

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

于 2013-09-18T07:23:02.873 回答
0

添加样式规则位置：相对于 wraper id main-wrap like

#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

于 2013-09-18T05:56:13.363 回答
0

我修复了您在 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 中测试过的文件，这里是 wetransfer

于 2013-09-18T10:10:26.043 回答
-1

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

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

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

于 2013-09-18T05:57:34.277 回答