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

Статус
В этой теме нельзя размещать новые ответы.
UltrbI4

UltrbI4

Гуру форума
Регистрация
15 Мар 2009
Сообщения
450
Реакции
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.
Заранее благодарен!
 
а можно детальнее про ошибку скрипта, есть такая информация? у меня тоже недавно была проблема, немного другая, но имеено в похожем контексте, ошибка, что-то типа cannot focus on hidden ..... решилось патчем кода джкваери. есть линк на саму страницу, чтоб загрузить и посмотреть? не все ресурсы оступны в квоте.
 
ipbfan2008 написал(а):
а можно детальнее про ошибку скрипта, есть такая информация? у меня тоже недавно была проблема, немного другая, но имеено в похожем контексте, ошибка, что-то типа cannot focus on hidden ..... решилось патчем кода джкваери. есть линк на саму страницу, чтоб загрузить и посмотреть? не все ресурсы оступны в квоте.
Нажмите для раскрытия...
К сожалению линка нету,делаю на компе!Не работают табы(закладки),срытие\показ контента и прокрутка мини-новостей,плавное смена цвета блока при наведение.
 
UltrbI4 написал(а):
К сожалению линка нету,делаю на компе!Не работают табы(закладки),срытие\показ контента и прокрутка мини-новостей,плавное смена цвета блока при наведение.
Нажмите для раскрытия...
тогда запакуй часть что у тебя на компе и приатачь в тему, попробую смекнуть что там иначе тяжело понять, что происходит. и кстати, почему в коде ошибка что не найден компонент карусель? не знаю что не так, но я скопировав код в файл и открыв его в файрфоксе не увидел вообще, чтоб что либо работало. возможно, у меня не всё чот нужно.
 
Приаттачил один из динамических элементов (карусель) - прокрутка мини-новостей.
Так вот,когда смотришь пример через сайт,где я скачал этот пак:
Скрытое содержимое доступно для зарегистрированных пользователей!

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

Вложения

  • horizantal-carousel-news.zip
    586,8 KB · Просмотры: 1
а где этот файл?
<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)
 
Вот!
 

Вложения

  • test.rar
    502,7 KB · Просмотры: 2
ipbfan2008 написал(а):
а где этот файл?
<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)
Нажмите для раскрытия...
А у меня почему-то не работает!Тоже Win 7 64
 
ipbfan2008 написал(а):
а где этот файл?
<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)
Нажмите для раскрытия...
Блин сорри я тебе индекс старый дал.Вот более новый:
 

Вложения

  • Untitled-7.rar
    3,7 KB · Просмотры: 1
без проблем, ту версию которую ты приаттачил ранее я запустил на виртуальном хосте и всё сработало на ура в ИЕ9
 

Вложения

  • ie9.jpg
    ie9.jpg
    215,5 KB · Просмотры: 8
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху