Ошибка совместимости IE7 с контейнером div с 4 div внутри - PullRequest
Новая
       2

Ошибка совместимости IE7 с контейнером div с 4 div внутри

0 голосов
/ 08 февраля 2011

В основном это моя проблема, у меня есть контейнер с 4-мя делителями внутри, в Firefox он прекрасно работает, а также в IE8, но .. он показывает представление совместимости все время, если я нажимаю на него, он перемещает делит из контейнера, что делает сайт выглядит ужасно. Кстати, 4 деления находятся сразу за меню, но на другом «содержании» дел. (Мне нужно это так ...)

Это мой код. 

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

Любая помощь в этом очень ценится.

Спасибо, ребята,

Marco

Ответы [ 2 ]

1 голос
/ 08 февраля 2011

Ссылка на действующую страницу почти требуется , чтобы сообщить вам, как это исправить окончательно.

На данный момент слишком много работы, чтобы попытаться воссоздать проблему (слишком много неизвестных переменных).

Есть ли на вашей странице тип документа ?

Когда я вижу это:

но .. это показывает вид совместимости все время

Предполагается, что ваша страница переведена в режим IE7.

Обычная причина в том, что эта строчка на вашей странице: 

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

вероятное правильное решение - удалить эту строку и настроить ваш сайт на работу в IE8.

Еще одна вещь, которую вы не указали, это то, насколько хорошо это работает в других браузерах, таких как Firefox, Chrome, и заботитесь ли вы об этом.

Если этот ответ вам не поможет, опубликуйте ссылку на свою живую страницу.

0 голосов
/ 09 февраля 2011

Чтобы исправить вашу проблему, выполните следующие действия:

  • Перемещение <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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...