Я разработал специальные блоки на веб-странице и добавил тень внизу с помощью CSS. Он выглядит хорошо в Chrome и Firefox, но когда я проверил IE 11, он не выглядел нормально.

enter image description here

Изображение выше из других браузеров, а нижнее изображение - в IE 11.

enter image description here

Я добавил тень, используя приведенный ниже код CSS:

.service_group:hover .uk-box-shadow-bottom:before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    border-radius: 100%;
    background: #000;
    filter: blur(20px);
}

Есть ли способ избавиться от сплошной черной тени в IE? Я узнал, что могу добавить таблицу стилей CSS для IE и переопределить этот код CSS внутри. Но, похоже, это было бы излишним. Есть способ сделать это попроще?

0
atsngr 9 Окт 2021 в 09:14

2 ответа

Лучший ответ

Вы можете использовать CSS, чтобы проверить, поддерживается ли фильтр браузером в современных браузерах. @support не поддерживается в IE, поэтому он просто игнорирует настройку фона на черный, поэтому он есть, но не отображается.

Вот пример фрагмента - очевидно, у него нет того размера, который будет у вашего кода.

<style>
  .service_group {}
  
  .uk-box-shadow-bottom {
    position: relative;
  }
  
  .service_group:hover .uk-box-shadow-bottom:before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 20px;
    border-radius: 100%;
    /*background: #000;*/
    /*filter: blur(20px);*/
    height: 40px;
  }
  
  @supports (filter: blur()) {
    .service_group:hover .uk-box-shadow-bottom:before {
      background: #000;
      filter: blur(20px);
    }
  }
</style>
<div class="service_group">Just some info so I can hover
  <div class="uk-box-shadow-bottom"></div>
</div>
2
A Haworth 9 Окт 2021 в 07:04

Вы можете попробовать тень коробки

.service_group:hover{
box-shadow: 3px 9px 35px 0px black;
}

А также можете проверить, сколько браузеров поддерживают это свойство.

https://caniuse.com/?search=box-shadow

0
Er. Mohammad Shuaib 9 Окт 2021 в 07:08