内含 4 个 div 的 div 容器的 IE7 兼容性错误答案

【问题标题】：IE7 compatibility error with div container with 4 divs inside内含 4 个 div 的 div 容器的 IE7 兼容性错误
【发布时间】：2011-02-09 18:27:52
【问题描述】：

基本上这是我的问题，我有一个里面有 4 个 div 的容器，在 Firefox 中它工作得很好，在 IE8 中也可以，但是..它一直显示兼容性视图，如果我点击它，它会移动 4 divs 从容器中取出，使网站看起来很糟糕。顺便说一句，这 4 个 div 就在菜单后面，但在另一个“内容”div 上。（我需要那样...）

这是我的代码。

<style type="text/css">
body{
    margin-top:2px; 
}

#main_frame{
     width:1024px;
     height:550px;
     position:relative;
     margin:0 auto;
     padding:0px;
     float:center;
     text-align:center;
     background:black;
}
#logo{
    width:275px;
    height:75px;
    background-image:url(images/logo.png);
    background-repeat:no-repeat;
    position:relative;
    margin:0 auto;
    padding:0px;
         float:left;
    }
#top_center{
    width:474px;
    height:75px;
    position: relative;
    top:0px;
    margin:0 auto;
    padding:0px;
    background-color:green;
    float:left;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;


    }
#top_right{
    width:275px;
    height:75px;
    position: relative;
    top:0px;
    margin:0 auto;
    padding:0px;
    background-color:red;
    float:left;

    }
#main_menu{
    width:1024px;
    height:25px;
    float:none;
    position:relative;
    float:left;
    margin:0 auto;
    padding:0px;
    background-color: #FF0;

          }
#content_frame{
    height:400px;
    width:1024px;
    position:relative;
    float:left;
    margin:0 auto;
    padding:0px;    
}
/* HERE THEY ARE */

#tag1{
    height:375px;
    width:256px;
    position:  absolute;
    float:left;
    margin:0 auto;
    padding:0px;
    background-color:#900;
}
#tag2{
    height:375px;
    width:256px;
    position:absolute;
        float:left;
    margin-left:256px;
    padding:0px;
    background-color: #930;
}
#tag3{
    height:375px;
    width:256px;
        position:absolute;
    float:left;
    margin-left:512px;
    padding:0px;
    background-color: #960;
}
#tag4{
    height:375px;
    width:256px;
    display: inherit;
    position:absolute;
    float:left;
    margin-left:768px;
    padding:0px;
    background-color:#990;
}
</style>

...删除了一些代码...

<body>
 <div id="main_frame">

         <div id="tag1"></div>
         <div id="tag2"></div>
         <div id="tag3"></div>
         <div id="tag4"></div>
  <div id="logo"></div>
  <div id="top_center"></div>
  <div id="top_right"></div>
  <div id="main_menu"></div>
  <div id="content_frame">

非常感谢您对此的任何帮助。

谢谢大家，

马可，

【问题讨论】：

标签： css css-float html

【解决方案1】：

一个实时页面的链接几乎是需要告诉你如何彻底解决这个问题。

目前，尝试重现问题（太多未知变量）的工作量太大。

你的页面有doctype吗？

当我看到这个时：

但是..它显示了兼容性视图一直都在

这表明您的页面被强制进入 IE7 模式。

通常的原因是您的页面中有这一行：

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

可能正确的做法是删除此行，并修复您的网站以在 IE8 中运行。

您没有说明的另一件事是它在 Firefox、Chrome 等其他浏览器中的效果如何 - 以及您是否关心这一点。

如果此答案对您的帮助不够，请发布指向您的实时页面的链接。

【讨论】：

您好，感谢您的评论。看，这是我的 doctype 声明。 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 我在代码中没有任何带有信息的附加元标记，实时站点就在这里。 .. securebitcr.com/test/index.php 所以你可以看看。谢谢您的帮助。马可，
我的回答有点离题 - 我猜错了。您的页面在 IE8 中工作，但在 IE7 中损坏。
默认！！！它可以工作，但显示通知“兼容性”视图的小图标......，当你点击它时，页面被......破坏了！对不起，如果我不够清楚，也许我的问题应该是，如何摆脱 IE8 上的那个图标。 @三十点
该图标使 IE8 的行为与 IE7 一样。我以为我已将其修复为在 IE7 中工作。您可以添加一个元标记：<meta http-equiv="X-UA-Compatible" content="IE=8" /> 这将“摆脱 IE8 上的那个图标” - 但是，这样做不会停止您的网站为 IE7 用户寻找错误。
感谢您提供的所有帮助，现在我明白了那个奇怪而丑陋的图标的原因！.. 好吧，另一个讨厌 IE 的原因，因为即使在 Opera-mini 中它也能正常工作！好吧，让我们重新构建它！谢谢，我非常感谢您的时间和帮助。 @三十点

【解决方案2】：

要解决您的问题，请按以下步骤操作：

将<div id="tag1"></div>、<div id="tag2"></div>、<div id="tag3"></div>、<div id="tag4"></div> 移动到内部<div id="content_frame"></div>，如下所示：

<div id="main_frame">

    <div id="logo"></div>
    <div id="top_center"></div>
    <div id="top_right"></div>
    <div id="main_menu"></div>

    <div id="content_frame">
        <div id="tag1"></div>
        <div id="tag2"></div>
        <div id="tag3"></div>
        <div id="tag4"></div>
    </div>

</div>

然后，从这四个标签divs 中删除margin 和position: absolute 规则。

我已经测试过，这可以修复它在 IE7、IE8、Firefox 中的工作。

顺便说一句，在我修复之后，我认为您的任何元素不再需要 position: relative 规则。

【讨论】：

是的。它可以工作，但不是我需要的。关键是，我需要在徽标区域后面放置这 4 个 div，标题 div ...，因为这些将是后面的独立图像。所以结构是这样的。 LOGO ----- 一些内容 ------ 电话和简要说明 MENU-------- CONTENT-------- FOOTER----- BUT .. 4 个 div 在后台！ ...您看到了原始版本...它可以在 Firefox 上正确运行，甚至在 IE8 中也可以正常运行，但存在兼容性问题。可能你有别的想法，我还在努力，谢谢你的帮助！！！ @三十点