Важная информация
Показано с 1 по 3 из 3

Тема: отображение слайдера в IE10 и 11

  1. #1 отображение слайдера в IE10 и 11 
    Новичок
    Регистрация
    16.12.2016
    Сообщений
    2
    Сказал(а) спасибо
    1
    Поблагодарили 0 раз(а) в 0 сообщениях
    Доброго времени суток!
    Есть такого рода код
    HTML Code:
    1.  
    2. <[Ссылки могут видеть только зарегистрированные пользователи. ] class="body_slides">
    3.             <[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
    4.             <[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
    5.             <[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
    6.         </[Ссылки могут видеть только зарегистрированные пользователи. ]>

    и стиль к нему
    CSS Code:
    1.  
    2. .body_slides{
    3.     list-style:none;
    4.     margin:0;
    5.     padding:0;
    6.     z-index:-2;
    7.     background:#fff;}
    8. .body_slides,
    9. .body_slides:after{
    10.     position: absolute;
    11.     width:100%;
    12.     height:100%;
    13.     top:0px;
    14.     left:0px;}
    15. .body_slides:after {
    16.     content: '';
    17.     background: transparent url(../images/pattern.png) repeat top left;}
    18.  
    19. @-webkit-keyframes anim_slides {
    20. 0% {opacity:0;}
    21. 3% {opacity:1;}
    22. 33% {opacity:1;}
    23. 38% {opacity:0;}
    24. 100% {opacity:0;transform: scale(1.4);transition: all 2s; }
    25. }
    26.  
    27. @-moz-keyframes anim_slides {
    28. 0% {opacity:0;}
    29. 3% {opacity:1;}
    30. 33% {opacity:1;}
    31. 38% {opacity:0;}
    32. 100% {opacity:0;}
    33. }
    34.  
    35.  
    36. .body_slides li{
    37.     width:100%;
    38.     height:100%;
    39.     position:absolute;
    40.     top:0;
    41.     left:0;
    42.     background-size:cover;
    43.     background-repeat:none;
    44.     opacity:0;
    45.     -webkit-animation: anim_slides 42s linear infinite 0s;
    46.     -moz-animation: anim_slides 42s linear infinite 0s;
    47.     -o-animation: anim_slides 42s linear infinite 0s;
    48.     -ms-animation: anim_slides 42s linear infinite 0s;
    49.     animation: anim_slides 42s linear infinite 0s;
    50.     
    51. }
    52.  
    53. .body_slides li:nth-child(1){
    54. background-image: url(../images/1.jpg) ;
    55. }
    56. .body_slides li:nth-child(2){
    57. -webkit-animation-delay: 14.0s;
    58. -moz-animation-delay: 14.0s;
    59. background-image: url(../images/2.jpg)
    60. }
    61.  
    62. .body_slides li:nth-child(3){
    63. -webkit-animation-delay: 28.0s;
    64. -moz-animation-delay: 28.0s;
    65. background-image: url(../images/3.jpg)
    66. }


    как добиться того, что бы бэкграунд <li> и то, что вложено в <li> (img, div) отображались в експлорере 10 и 11?

    добавляю в стилях
    CSS Code:
    1.  
    2. @keyframes anim_slides {
    3. 0% {opacity:0;}
    4. 3% {opacity:1;}
    5. 33% {opacity:1;}
    6. 38% {opacity:0;}
    7. 100% {opacity:0;}
    8. }


    но в експлорере отображается лишь последний бэкграунд почему то.
    Перепробывал хаки, но ни один из них не заработал.
    Может кто подскажет?
    Ответить с цитированием  
     

  2. #2  
    Администратор Аватар для rovico
    Регистрация
    17.04.2014
    Адрес
    Ярославль
    Сообщений
    245
    Сказал(а) спасибо
    17
    Поблагодарили 287 раз(а) в 162 сообщениях
    Записей в блоге
    2
    Отвечаю поздно ,может и не актуально уже... упущены настройки делея для -o и для -ms:
    CSS Code:
    1.  
    2. .body_slides li:nth-child(2){
    3. -webkit-animation-delay: 14.0s;
    4. -moz-animation-delay: 14.0s;
    5. -o-animation-delay: 14.0s;
    6. -ms-animation-delay: 14.0s;
    7. background-color: #0000ff;
    8. }
    9.  
    10. .body_slides li:nth-child(3){
    11. -webkit-animation-delay: 28.0s;
    12. -moz-animation-delay: 28.0s;
    13. -o-animation-delay: 28.0s;
    14. -ms-animation-delay: 28.0s;
    15. background-color: #00ff00;
    16. }


    Вот фиддл https://jsfiddle.net/8fpese4n/2/
    Ответить с цитированием  
     

  3. 2 пользователя(ей) сказали cпасибо:

    Free Admin (20.12.2016), kolunix (19.12.2016)

  4. #3  
    Новичок
    Регистрация
    16.12.2016
    Сообщений
    2
    Сказал(а) спасибо
    1
    Поблагодарили 0 раз(а) в 0 сообщениях
    Вот блин, и в правду!
    Спасибо огромное - работает!
    Ответить с цитированием  
     

Информация о теме
Пользователи, просматривающие эту тему

Эту тему просматривают: 1 (пользователей: 0 , гостей: 1)

Похожие темы

  1. Отображение курсора в программе для тачскрина
    от Don_Ir в разделе Операционные системы
    Ответов: 0
    Последнее сообщение: 01.07.2016, 13:41
  2. Ответов: 0
    Последнее сообщение: 01.09.2013, 17:37
  3. Неправильное отображение слайдера
    от Марат в разделе JavaScript
    Ответов: 0
    Последнее сообщение: 29.09.2012, 10:11
Ваши права
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •