CSS - Inte rnet Исследователь не будет отображать тени и переходы - PullRequest
Новая
       54

CSS - Inte rnet Исследователь не будет отображать тени и переходы

0 голосов
/ 19 апреля 2020

Я пытаюсь выделить div с помощью перехода и тени блока. 

  transition: transform .8s ease-in;
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);

Я получаю его для работы в Chrome, но не IE , Что вы предлагаете?

--- Обновление 1 мая 2020 г. ---

Я сузил свою проблему. Если я изменяю отображение на блок или таблицу, это работает, но по умолчанию элемент является строкой таблицы. Когда я изменяю дисплей, он работает, но отбрасывает мой стиль. Есть какая-нибудь конкретная подсказка, в чем разница между "таблицей" и "строкой таблицы"?

Ответы [ 2 ]

0 голосов
/ 20 апреля 2020

Если вы удалите преобразование из строки ниже, оно будет работать в браузере IE 11. 

 transition: transform .8s ease-in;

Тестовый код: 

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition:.8s ease-in;
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
}

div:hover {
  width: 300px;
}
</style>
</head>
<body>

	<div>Test</div><br>

	<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

</body>
</html>

Вывод в браузере IE 11.

enter image description here

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

0 голосов
/ 19 апреля 2020

попробуйте использовать следующий код: 

transition: transform .8s ease-in;
box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
-webkit-transition: transform .8s ease-in;
-webkit-box-shadow: 0 5px 10px 2px rgba(0, 0, 0, .2);
...