Question

基本上这是我的问题，我有一个内置4个div的容器，在firefox中工作得很好，而且在IE8中但是..它一直显示兼容性视图，如果我点击它，它会移动4 div出容器，使网站看起来很糟糕。顺便说一下，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">

非常感谢任何帮助。

谢谢你们，

马科，

Answer 1

指向实时网页的链接几乎是必需，告诉您如何明确解决此问题。

目前，尝试重新创建问题（太多未知变量）太多了。

您的网页是否有doctype？

当我看到这个时：

但.. ..显示兼容性视图一直

它表明您的网页被强制转换为IE7模式。

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

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

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

你没有说明的另一件事是它在其他浏览器（如Firefox，Chrome）中的效果如何 - 以及你是否关心它。

如果此答案对您没有帮助，请发布指向您的实际网页的链接。

Answer 2

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

将<div id="tag1"></div>，<div id="tag2"></div>，<div id="tag3"></div>，<div id="tag4"></div>移至 {/ 1>}内的，如下所示：

<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规则。

我已经测试过，这可以解决它在IE7，IE8，Firefox中的作用。

顺便说一句，在我修复后，我认为你的元素不再需要position: absolute规则。

与div容器的IE7兼容性错误，里面有4个div

2 个答案: