Jump to content
  • Sign Up
Xandr555

Как подогнать css под Safari 5 и IE-11

Recommended Posts

Добрый день. Размещено 2 блока по 3 изображения, отцентрировано flex, по плану при наведении курсора картинка затемняется, сверху появляется описание. Стили работают как задумано только в Chrome и Opera. В Сафари рамка не всплывает, текст не выравнивается. В IE 11 рамка всплывает, текст не выравнивается. Заранее благодарю.

<div class="wrapper">
    <div class="demo-content">
   <div class="part">
        <figure class="img-box">
            <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg>
            <figcaption><section class="imgone">По Вашему желанию электропроводку можно уложить в ПВХ-короб</section></figcaption>
        </figure>
        <figure class="img-box">
            <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg>
            <figcaption><section class="imgone">Красиво, эстетично и надежно - наше кредо!</section></figcaption>
        </figure>
        <figure class="img-box">
            <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg>
            <figcaption><section class="imgone">Такой вариант электропроводки рекомендуем, например, в подсобных постройках</section></figcaption>
   </figure>
    </div>
   </div>
</div>
        <div class="wrapper">
    <div class="demo-content">
        <div class="part">
  <figure class="img-box">
            <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample54.jpg>
            <figcaption><section class="imgone">Вмонтированный в стену электросчетчик делает Вашу квартиру более объемной</section></figcaption>
        </figure>
        <figure class="img-box">
            <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg>
            <figcaption><section class="imgone">Устанавливайте новые светильники, мы поможем подобрать их по мощности</section></figcaption>
        </figure>
        <figure class="img-box">
            <img alt=img src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample58.jpg>
            <figcaption><section class="imgone">Мы устанавливаем розетки и выключатели в любой компоновке</section></figcaption>
        </figure>
 </div>
  </div>
  </div>
*, *:after, *:before {
    box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -ms-box-sizing: border-box;
}
 
 
.wrapper{margin:0 auto}
 
.demo-content {
    text-align: center;
}
.part{max-height:310px;max-height:100%;display:flex;display:-moz-flex;display: -webkit-flex;justify-content:center}
 
figure.img-box {
  text-align: center;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 3px 3px;
   max-width: 300px;
  width:100%;
  background-color:#DCDCDC;
  -webkit-box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf);
  box-shadow: 0 8px 17px 0 hex(#cccccc), 0 6px 20px 0 hex(#cfcfcf);
}
figure.img-box * {
  -webkit-box-sizing: padding-box;
  box-sizing: padding-box;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
figure.img-box img {
  max-width: 100%;
  vertical-align: top;
}
figure.img-box figcaption {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    align-items:center;
    z-index:1;
    display: flex;
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
    flex-direction:column;
 -webkit-flex-direction:column;
 -moz-flex-direction:column;
 -ms-flex-direction:column;
    justify-content:center;
    
    opacity:0;
}
 
figure.img-box:after {
  border: 8px solid #FF0000;
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  bottom: 50%;
  left: 0;
  right: 0;
  -webkit-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  opacity: 0;
}
 
figure.img-box:hover img {
  opacity:0.2;
}  
figure.img-box:hover:after {
  top: 0;
  bottom: 0;
  opacity: 0.9;
}
.img-box .imgone {
 font-family:'Roboto',sans-serif;
    color:#00008B;
 font-size:16px;
    font-weight: 400;
    
    margin: 0;
    padding:0 10px;
    
    transform: scale(0);
  -webkit-transform:scale(0);
  -ms-transform:scale(0);
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
 -ms-transition: all 1s ease 0s;
 }  
.img-box:hover figcaption, .img-box:hover .imgone {
    transform: scale(1);
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
    opacity: 1;
}

скриншоты прилагаю

сафари.jpg

операхром.jpg

ие11.jpg

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By de3ok
      Есть контейнер в котором много других контейнеров. Как сделать заполнение друг за другом с переносом в случае если контейнеру не хватает места. (пример на пикче)

      У меня получается либо контейнер занимает все свободное место по горизонтали, либо по вертикали. Но ни как не друг за другом " одной колонкой"

    • By Yurii.Vovchuk
      Привет. Друзья, подскажите пожалуйста, как сверстать вот такую сетку на флексах, чтобы блоки нижнего ряда прилипали к блокам верхнего (типа мозаичная верстка).
      Применил align-items:flex-start, думал что сработает, но нет...

    • By Govt_sm80
      Привет всем.Не могу поменять размер иконок с сайта https://fontawesome.com/icons/key?style=solid  и не получается сделать такие разделы как на картинке, может кто-то занет как это сделать?      вот ссылка на код    http://jsfiddle.net/kcd86y01/1/     и они еще должны выезжать  анимацией
  • Member Statistics

    46,897
    Total Members
    1,451
    Most Online
    Neovo
    Newest Member
    Neovo
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Дорогие Друзья! Рад вам сообщить о выходе новой версии движка Flextype 0.9.9! В Flextype 0.9.9 достаточно много важных изменений определяющих — то как будет выглядеть финальная версия Flextype 1.0.0, к которой я иду уже более двух лет! Были пересмотрены, обновлены и переписаны ключевые моменты ядра, ответственные за работу с Записями, Коллекциями, Кешем и Rest API. Подробнее в статье: https://vk.com/@flextype-flextype-099-reliz Большое спасибо всем за то, что вы являетесь частью сообщества Flextype!
    • Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software разработками. На данный момент в команду требуются Full stack .NET (Junior & Senior) — 3+ year of commercial experience; — Strong knowledge of Angular 5+; — Strong knowledge of Typescript; — Experience with HTML/HTML5, CSS/CSS3, SCSS; — Good understanding of Git; — Conversational English. Будет плюсом: VB experience Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com
    • Привет! Меня зовут Евгения и я ищу талантливых программистов в компанию DevCube. https://mydevcube.com/ Это международная компания, которая занимается DevOps, web и software development. На данный момент в команду требуются PHP developers (Junior & Senior) Requirements: — 3+ year of commercial experience; — Strong knowledge PHP 7+ — Framework knowledge — Conversational English — CSS, Json, HTML5 Будет плюсом: Shopify implementation expertise. Условия: Удаленная работа full-time Зарплата от 10-20$/час по результатам собеседования. Обязательное условие - быть на связи до 21-22:00 по Москве. Для отклика прошу писать на почту: evgeniia.ko@mydevcube.com
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...