与4容器内部div容器的IE7兼容性错误

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

这是我的代码。

<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">

任何帮助的，这是极大的赞赏。

谢谢你们，

马可，

来源

2011-02-08 Marco

一个链接到一个网页直播几乎是需要告诉你如何明确解决这个问题。

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

您的页面是否有doctype？

当我看到这一点：

但..它显示了兼容性视图所有这意味着你的网页被裹挟到IE7模式的时间

。

通常的原因是有这条线在你的页面：

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

做的可能正确的做法是删除此行，并解决您的网站在IE8工作。

您没有指定的另一件事是它在其他浏览器（如Firefox，Chrome）中的效果如何 - 您是否在意这一点。

如果此答案对您无法帮助，请将链接发布到您的实时页面。

来源

2011-02-08 10:09:59 thirtydot

嗨，感谢您的评论。看，这是我的文档类型声明。 <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> I don在代码中没有任何额外的元标签信息，活的网站就在这里... http://securebitcr.com/test/index.php所以你可以看看它。感谢您的帮助。 Marco， – Marco 2011-02-09 04:42:25

我的答案有点偏离我看 - 我猜错了方向。您的页面*在IE8中运行*，但在IE7中中断。 – thirtydot 2011-02-09 10:19:43

解决您的问题，请按照下列步骤操作：

移动<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统治下去了。

来源

2011-02-09 10:27:52 thirtydot

与4容器内部div容器的IE7兼容性错误

回答

相关问题