带有7个div的div容器的IE7兼容性错误
[英]IE7 compatibility error with div container with 4 divs inside
问题描述
Basically this is my issue, I have a container with 4 divs inside, in firefox it works just fine and also in IE8 but ..it shows the compatibility view all the time, if I click on it, it moves the 4 divs out of the container, making the site looks terrible. 
基本上这是我的问题，我有一个容器，里面有4个div，在firefox中它可以正常工作，在IE8中也可以，但是..它始终显示兼容性视图，如果单击它，它将4个div移出容器，使网站看起来糟透了。 btw, the 4 divs are just behind the menu but on another "content" div. 顺便说一句，这4个div就在菜单后面，但在另一个“内容” div上。 (I need it that way...) （我需要那样的方式...）
This is my code. 这是我的代码。
<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>
... some code removed... ...删除了一些代码...
<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">
Any help on this is greatly appreciated. 在此方面的任何帮助将不胜感激。
Thanks guys, 多谢你们，
Marco, 马可
2 个解决方案
解决方案1
1 已采纳 2011-02-08 10:09:59
A link to a live page is almost required to tell you how to definitively fix this. 几乎需要链接到活动页面的链接，以告诉您如何确定地解决此问题。
At the moment, it's too much work to try and recreate the problem (too many unknown variables). 目前，尝试重新创建问题的工作量过多（太多未知变量）。
Does your page have a doctype ? 您的页面有doctype吗？
When I see this: 当我看到这个：
but ..it shows the compatibility view all the time
It suggests that your page is being coerced into IE7 mode. 这表明您的页面已被强制进入IE7模式。
The usual cause is having this line in your page: 通常的原因是页面中包含以下行：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
The probable correct thing to do is remove this line, and fix your site to work in IE8. 可能的正确做法是删除此行，并修复您的网站以在IE8中工作。
Another thing you didn't specify is how well this works in other browsers such as Firefox, Chrome - and whether you care about this. 您没有指定的另一件事是，它在其他浏览器（例如Firefox，Chrome）中的运行情况如何，以及您是否对此有所关注。
If this answer doesn't help you enough, post a link to your live page. 如果此答案不能为您提供足够的帮助，请在您的实时页面上发布一个链接。
解决方案2
0 2011-02-09 10:27:52
To fix your problem, follow these steps: 要解决您的问题，请按照下列步骤操作：
Move
<div id="tag1"></div>,<div id="tag2"></div>,<div id="tag3"></div>,<div id="tag4"></div>to inside<div id="content_frame"></div>, like this:移动<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>Then, from those four tag
divs, remove themarginandposition: absoluterules.然后，从这四个标签divs，删除margin和position: absolute规则。
I've tested that this fixes it to work in IE7, IE8, Firefox. 我已经测试过，它可以解决此问题，使其可以在IE7，IE8，Firefox中正常工作。
As an aside, after my fix I don't think any of your elements requires the position: relative rule any longer. 顺便说一句，在我修复之后，我认为您的任何元素都不需要position: relative规则。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.