Конфликт в IE9 и 8

Тема в разделе "JavaScript", создана пользователем UltrbI4, 5 дек 2012.

Статус темы:
Закрыта.
Модераторы: ZiX
  1. UltrbI4

    UltrbI4

    Регистр.:
    15 мар 2009
    Сообщения:
    449
    Симпатии:
    53
    Здравствуйте.Верстал для одного человечка одностраничник,состоящий из динамических элементов.
    Начал тестировать в разных браузерах.Везде отображается идеально.Но в IE не хочет работать.Ни один динамический элемент jquery в IE не работает!

    Вот мой код:
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
    <head>
     
    <title>Сайт</title>
     
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" type="text/css" href="test/style.css" media="all" />
     
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
     
    <script type="text/javascript" src="test/tabs.js"></script>
     
    <script>
    function anichange (objName) {
      if ( $(objName).css('display') == 'none' ) {
     
        $(objName).animate({height: 'show'}, 400);
     
      } else {
     
        $(objName).animate({height: 'hide'}, 200);
     
      }
     
    }
    </script>
     
    <script type="text/javascript" src="test/style/js/jquery.jcarousel.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function() {
        // Initialise the first and second carousel by class selector.
        // Note that they use both the same configuration options (none in this case).
        jQuery('.d-carousel .carousel').jcarousel({
            scroll: 1
        });
    });
    </script>
     
     
    <script type="text/javascript">
    $(document).ready(function(){
    $(".mainhead").hover(function() {
    $(this).stop().animate({ backgroundColor: "#f0292c"}, 400);
    },function() {
    $(this).stop().animate({ backgroundColor: "#9eabb3" }, 400);
    });
    });
    </script>
     
      <script type="text/javascript">
    $(document).ready(function(){
    $(".mainhead1").hover(function() {
    $(this).stop().animate({ backgroundColor: "#f0292c"}, 400);
    },function() {
    $(this).stop().animate({ backgroundColor: "#9eabb3" }, 400);
    });
    });
    </script>
     
      <script type="text/javascript">
    $(document).ready(function(){
    $(".mainhead2").hover(function() {
    $(this).stop().animate({ backgroundColor: "#f0292c"}, 400);
    },function() {
    $(this).stop().animate({ backgroundColor: "#9eabb3" }, 400);
    });
    });
    </script>
     
      <script type="text/javascript">
    $(document).ready(function(){
    $(".mainhead3").hover(function() {
    $(this).stop().animate({ backgroundColor: "#f0292c"}, 400);
    },function() {
    $(this).stop().animate({ backgroundColor: "#9eabb3" }, 400);
    });
    });
    </script>
     
        <script type="text/javascript">
    $(document).ready(function(){
    $(".mainhead4").hover(function() {
    $(this).stop().animate({ backgroundColor: "#f0292c"}, 400);
    },function() {
    $(this).stop().animate({ backgroundColor: "#9eabb3" }, 400);
    });
    });
    </script>
     
        <script type="text/javascript">
    $(document).ready(function(){
    $(".mainhead5").hover(function() {
    $(this).stop().animate({ backgroundColor: "#f0292c"}, 400);
    },function() {
    $(this).stop().animate({ backgroundColor: "#9eabb3" }, 400);
    });
    });
    </script>
     
    <style type="text/css">
    .section {
        width: 100%;
        background: #EFEFEF;
        margin: -17px 1px -0px 0px;
       
    }
     
    ul.tabs {
        height: 38px;
        line-height: 38px;
        list-style: none;
        border-bottom: 1px solid #DDD;
        background: #a4adb1;
    }
     
    .tabs li {
        float: left;
        display: inline;
        padding: 0 13px 1px;
        color: #fff;
        cursor: pointer;   
        margin: 0 1px -1px 0;   
        background: #a4adb1;
        border: 1px solid #E4E4E4;
        border-bottom: 1px solid #F9F9F9;
        position: relative;   
    }
     
    .tabs li:hover,
    .vertical .tabs li:hover {
        color: #fff;
        padding: 0 13px;
        background: #f0292c;
        border: 0px solid #FFCA95;
    }
     
    .tabs li.current {
        color: #444;
        background: #fff;
        padding: 0 13px 2px;
        border: 0px solid #D4D4D4;
        border-bottom: 1px solid #EFEFEF;
    }
     
    .box {
        display: none;
        border: 1px solid #D4D4D4;
        border-width: 0 0px 0px;
        background: #fff;
        padding: 0px 1px;
    }
     
    .box.visible {
        display: block;
    }
     
     
    .logo {
        margin-left: 20px;
        margin-bottom: 0px;
    }
     
    p {
    color: #ffffff;
    margin-top: -10px;
    }
     
    .mainhead {
    margin-bottom:1px;
    margin-left:20px;
    width:50%;
    height: 1px;
    background-color: #9eabb3;
    position:relative;
    text-align: center;
    border: 1px solid #D4D4D4;
    padding:15px 10px;
    }
     
    .mainhead1 {
    margin-bottom:1px;
    margin-left:20px;
    width:70%;
    height: 1px;
    background-color: #9eabb3;
    position:relative;
    text-align: center;
    border: 1px solid #D4D4D4;
    padding:15px 10px;
    }
     
    .mainhead2 {
    margin-bottom:1px;
    margin-left:20px;
    width:60%;
    height: 1px;
    background-color: #9eabb3;
    position:relative;
    text-align: center;
    border: 1px solid #D4D4D4;
    padding:15px 10px;
    }
     
    .mainhead3 {
    margin-bottom:1px;
    margin-left:20px;
    width:80%;
    height: 1px;
    background-color: #9eabb3;
    position:relative;
    text-align: center;
    border: 1px solid #D4D4D4;
    padding:15px 10px;
    }
     
    .mainhead4 {
    margin-bottom:1px;
    margin-left:20px;
    width:63%;
    height: 1px;
    background-color: #9eabb3;
    position:relative;
    text-align: center;
    border: 1px solid #D4D4D4;
    padding:15px 10px;
    }
     
    .mainhead5 {
    margin-bottom: 20px;
    margin-left: 180px;
    width: 70px;
    height: 1px;
    background-color: #9eabb3;
    position:relative;
    text-align: center;
    border: 1px solid #D4D4D4;
    padding:15px 10px;
    }
     
    .mainheadText {
    margin-bottom: -10px;
    margin-left: 40px;
    width: 130px;
    height: 1px;
    position:relative;
    text-align: center;
    font-weight: bold;
    color: red;
    }
     
     
    .mainheadSig {
    margin-bottom: 10px;
    margin-left: 10px;
    width: 130px;
    height: 1px;
    position:relative;
    }
     
    div.left_col {
        background-color:#fff;
        border-right:1px dashed #717dc9;
        min-width:1%;
        max-width: 300px;
        height:100%;
        float:left
        }
    div.right_col {
        background-color:#fff;
        height:100%;
        min-width:100%;
        max-width:100%;
        margin-left:200px;
        padding-left:20px
        }
     
    .bg1 {
        background-image: url(test/header_bg1.png);
    }
    .bg2 {
        background-image: url(test/images/test_html_02.jpg);
    }
    .bg3 {
        background-image: url(test/images/test_html_03.jpg);
    }
    .bg4 {
        background-image: url(test/header_bg_right.png);
    }
    .bg5 {
        background-image: url(test/header_down_bg_left.png);
    }
    .bg6 {
        background-image: url(test/images/test_html_10.jpg);
    }
    .bg7 {
        background-image: url(test/bg_navigation.png);
        height: 40px;   
    }
    </style>
     
    </head>
     
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
     
    <table id="Table_01" width="50%" border="0" cellpadding="0" cellspacing="0" align="center">
     
        <tr>
     
            <td class="bg1">
    <div class="logo"><a href="/"><img src="test/logo.png" /></a></div>
    </td>
     
            <td class="bg2">
     
                </td>
     
            <td colspan="3" class="bg3">
    <font size="6px" color="#919191" style="font-weight: bold; margin-left: 70px;"> Стресс-тестирование</font><br /><font size="6px" color="#919191" style="font-weight: bold; margin-left: 70px;"> инфраструктуры</font>
                </td>
     
            <td><img src="test/images/test_html_04.jpg" width="1" height="112" alt=""></td>
     
            <td rowspan="3" class="bg4"><br/><br/><br/>
        <div class="mainheadText">+7 495 504-87-81</div>
    <div class="mainhead5"><p>Контакты</p></div>
    <div style="margin-bottom: 20px; margin-left: 20px;"><font size="4px" color="#000000" style="font-weight: bold; margin-left: 10px;">Стань нашим консультантом!</font><img src="test/poloska.png" />
    Мы всегда рады новым сотрудникам.
    Если Вы эксперт в области продаж, или консультант по технологиям, наша компания готова предложить вам отличное дополнение к вашему основному бизнесу.
    </div>
          </td>
        </tr>
     
        <tr>
     
            <td colspan="3">
     
                <img src="test/images/test_html_06.jpg" width="479" height="1" alt=""></td>
     
            <td rowspan="2">
     
                <img src="test/images/test_html_07.jpg" width="1" height="228" alt=""></td>
     
            <td colspan="2">
     
                <img src="test/images/test_html_08.jpg" width="386" height="1" alt=""></td>
     
        </tr>
     
        <tr>
     
            <td colspan="3" class="bg5">
    <div class="mainhead"><p>Лицензирование ПО</p></div>
    <div class="mainhead1"><p>Поставки серверного оборудованиия</p></div>
    <div class="mainhead2"><p>Аудит IT-инфраструктуры</p></div>
    <div class="mainhead3"><p>Разработка мобильных платформ и приложений</p></div>
    <div class="mainhead4"><p>Корпоротивные cloud-приложения</p></div>
                </td>
     
            <td class="bg6">
     
                </td>
     
            <td>
     
                <img src="test/images/test_html_11.jpg" width="1" height="227" alt=""></td>
     
        </tr>
     
        <tr>
     
            <td colspan="7">
     
                <img src="test/images/test_html_12.jpg" width="1176" height="1" alt=""></td>
     
        </tr>
     
        <tr>
     
            <!--<td colspan="7" class="bg7">
     
                <img src="test/bg_navigation.png" width="1176" height="40" alt=""></td>-->
    <td colspan="7">
      <div class="section">
     
        <ul class="tabs">
            <li class="current">Новости</li>
            <li>Проекты</li>
            <li>Партнеры</li>
            <li>Сотрудничество</li>
            <li>О компании</li>
        </ul>
     
        <div class="box visible">
    <div class="left_col">
    <div id="divId" style="display: block;">
      Вы попали на официальный сайт<br/> IT-компании "Программная логистика"<br/>
    Если Вы еще не являетесь нашим клиентом,<br/> то надеемся, что это вскоре произойдет.<br/>
        Мы постараемся поделиться не только<br/> нашими возможностями, но и знаниями,<br/> поскольку нам кажется, что если<br/> поддерживать высокий уровень компетенции<br/> у наших заказчиков, то это позволит нам <br/>взаимодействовать максимально эффективно.<br/>
      Наша компания  не только создает<br/> решения для заказчиков, но<br/> и сами эксплуатирует собственные проекты.
      <a href="#" onclick="anichange('#divId');return false">Открыть/Закрыть</a>
    </div>
    </div>
    <!-- Begin Wrapper -->
    <div id="wrapper">
     
      <div class="d-carousel">
       
        <ul class="carousel">
         
          <li>       
            <font size="2px" color="#818181" style="font-weight: bold;">05 декабря</font>
            <h4><a href="#">Открытие нового корпоративного сайта</a></h4>
            <a href="#"><img src="test/images/corporation.png" alt="" width="175" height="120" /></a>
            Надеемся, что наш новый сайт будет полезен вам. Мы будем рады любым вопросам относительно интересующей вас информации
            </li>
          <li>
            <font size="2px" color="#818181" style="font-weight: bold;">05 декабря</font>
            <h4><a href="#">Вебинар по Oracle VM</a></h4>
            <a href="#"><img src="test/images/vebinar.png" alt="" width="175" height="120" /></a>
            Начало вебинара:10:00(Moscow Time).Аудитория:Директора по продажам и sales-менеджеры
            </li>
          <li>
            <font size="2px" color="#818181" style="font-weight: bold;">05 декабря</font>
            <h4><a href="#">Мы начинаем продажи Oracle Exadata</a></h4>
            <a href="#"><img src="test/images/insales.png" alt="" width="175" height="120" /></a>
            Первыми в России мы предлагаем высокопроизводительный программно-аппаратный комплекс для хранилищ данных Oracle Exadata V2
            </li>
          <li>
            <h4><a href="#">Новость</a></h4>
            <a href="#"><img src="test/style/images/carousel.jpg" alt="" /></a>
            Текст новости
            </li>
          <li>
            <h4><a href="#">Новость</a></h4>
            <a href="#"><img src="test/style/images/carousel.jpg" alt="" /></a>
            Текст новости
            </li>
          <li>
            <h4><a href="#">Новость</a></h4>
            <a href="#"><img src="test/style/images/carousel.jpg" alt="" /></a>
            Текст новости
            </li>
          <li>
            <h4><a href="#">Новость</a></h4>
            <a href="#"><img src="test/style/images/carousel.jpg" alt="" /></a>
            Текст новости
            </li>
          <li>
            <h4><a href="#">Новость</a></h4>
            <a href="#"><img src="test/style/images/carousel.jpg" alt="" /></a>
            Текст новости
            </li>
          </ul>
        </div>
      <div class="clear"></div>
    </div>
     
      <!-- End Wrapper -->
    </div>
        <div class="box">
            Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2
            Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2
            Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2
            Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2
            Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2
            Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2
            Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2
            Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2Тест2
        </div>
     
        <div class="box">
            <p>Тест3</p>
        </div>
     
        <div class="box">
            <p>Тест4</p>
        </div>
     
    </div>
           
     
    </td>
     
        </tr>
     
        <tr>
     
            <td>
     
                <img src="test/images/test_html_14.jpg" width="293" height="1" alt=""></td>
     
            <td rowspan="3">
     
                <img src="test/images/test_html_15.jpg" width="1" height="1" alt=""></td>
     
            <td colspan="5">
     
                <img src="test/images/test_html_16.jpg" width="882" height="1" alt=""></td>
     
        </tr>
     
        <tr>
     
            <!--<td>
     
                <img src="test/images/test_html_17.jpg" width="293" height="407" alt=""></td>
     
            <td colspan="5">
     
                <img src="test/images/test_html_18.jpg" width="882" height="407" alt=""></td>-->
     
        </tr>
     
        <tr>
     
            <td>
     
                <img src="test/images/test_html_19.jpg" width="293" height="1" alt=""></td>
     
            <td colspan="5">
     
                <img src="test/images/test_html_20.jpg" width="882" height="1" alt=""></td>
     
        </tr>
     
        <tr>
     
            <td colspan="7">
     
                <img src="test/images/bgfooter.jpg" width="1176" height="110" alt=""></td>
     
        </tr>
     
        <tr>
     
            <td>
     
                <img src="test/images/spacer.gif" width="293" height="1" alt=""></td>
     
            <td>
     
                <img src="test/images/spacer.gif" width="1" height="1" alt=""></td>
     
            <td>
     
                <img src="test/images/spacer.gif" width="185" height="1" alt=""></td>
     
            <td>
     
                <img src="test/images/spacer.gif" width="1" height="1" alt=""></td>
     
            <td>
     
                <img src="test/images/spacer.gif" width="385" height="1" alt=""></td>
     
            <td>
     
                <img src="test/images/spacer.gif" width="1" height="1" alt=""></td>
     
            <td>
     
                <img src="test/images/spacer.gif" width="310" height="1" alt=""></td>
     
        </tr>
     
    </table>
     
    <!-- End ImageReady Slices -->
     
     
    </body>
    </html>
    Помогите разобраться в чем проблема,в чем конфликт и заставить дружить сей код с IE.
    Заранее благодарен!
     
  2. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.726
    Симпатии:
    2.100
    а можно детальнее про ошибку скрипта, есть такая информация? у меня тоже недавно была проблема, немного другая, но имеено в похожем контексте, ошибка, что-то типа cannot focus on hidden ..... решилось патчем кода джкваери. есть линк на саму страницу, чтоб загрузить и посмотреть? не все ресурсы оступны в квоте.
     
  3. UltrbI4

    UltrbI4

    Регистр.:
    15 мар 2009
    Сообщения:
    449
    Симпатии:
    53
    К сожалению линка нету,делаю на компе!Не работают табы(закладки),срытие\показ контента и прокрутка мини-новостей,плавное смена цвета блока при наведение.
     
  4. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.726
    Симпатии:
    2.100
    тогда запакуй часть что у тебя на компе и приатачь в тему, попробую смекнуть что там иначе тяжело понять, что происходит. и кстати, почему в коде ошибка что не найден компонент карусель? не знаю что не так, но я скопировав код в файл и открыв его в файрфоксе не увидел вообще, чтоб что либо работало. возможно, у меня не всё чот нужно.
     
  5. UltrbI4

    UltrbI4

    Регистр.:
    15 мар 2009
    Сообщения:
    449
    Симпатии:
    53
    Приаттачил один из динамических элементов (карусель) - прокрутка мини-новостей.
    Так вот,когда смотришь пример через сайт,где я скачал этот пак:

    То все отображается нормально.
    Скачиваю архив,распаковываю запускаю индекс и получается косяк,но только в IE в остальных браузерах работает нормально!
     

    Вложения:

  6. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.726
    Симпатии:
    2.100
    а где этот файл?
    <script type="text/javascript" src="test/tabs.js"></script>

    ну и не знаю правильный путь
    <script type="text/javascript" src="test/style/js/jquery.jcarousel.js"></script>

    ну неужели так трудно спаковать локальную версию и приаттачить один раз? ты хочешь помощи-совета или чтоб другие парились и выспрашивали по чуть-чуть?

    сама карусель в архиве, что ты приаттачил в IE9 работает без проблем (Win 7 x64)
     
  7. UltrbI4

    UltrbI4

    Регистр.:
    15 мар 2009
    Сообщения:
    449
    Симпатии:
    53
    Вот!
     

    Вложения:

    • test.rar
      Размер файла:
      502,7 КБ
      Просмотров:
      2
  8. UltrbI4

    UltrbI4

    Регистр.:
    15 мар 2009
    Сообщения:
    449
    Симпатии:
    53
    А у меня почему-то не работает!Тоже Win 7 64
     
  9. UltrbI4

    UltrbI4

    Регистр.:
    15 мар 2009
    Сообщения:
    449
    Симпатии:
    53
    Блин сорри я тебе индекс старый дал.Вот более новый:
     

    Вложения:

    • Untitled-7.rar
      Размер файла:
      3,7 КБ
      Просмотров:
      1
  10. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.726
    Симпатии:
    2.100
    без проблем, ту версию которую ты приаттачил ранее я запустил на виртуальном хосте и всё сработало на ура в ИЕ9
     

    Вложения:

    • ie9.jpg
      ie9.jpg
      Размер файла:
      215,5 КБ
      Просмотров:
      8
Статус темы:
Закрыта.