Можно ли использовать box-shadow в IE8?

Почему этот CSS применяется непоследовательно в разных фреймворках/средах/браузерах?

У меня есть прототип, созданный в Meteor, где CSS отлично работает при создании эффекта тени и добавлении границы к различным изображениям при наведении курсора; в частности, в прототипе Meteor (это приложение Sharepoint, но тестировать такие функции гораздо быстрее с Meteor) у меня есть этот CSS:

#imgPostTravelTop:hover, #imgPostTravelTopRight:hover, #imgPostTravelCenter:hover, #imgPostTravelBottom:hover {
  z-index: 4;
    -moz-box-shadow: 0 0 7px #000;
    -webkit-box-shadow: 0 0 7px #000;
    box-shadow: 0 0 7px #000;

  border: 1px solid gold;
}

Он отлично работает - при вводе мыши / наведении на изображение появляется золотая пятичасовая тень.

Впрочем, практически то же самое и в коде Sharepoint:

.finaff-form-help-post-travel-centerimage:hover, 
.finaff-form-help-post-travel-bottomimage:hover {
    z-index: 4;
    -moz-box-shadow: inset 0 0 7px #000;
    -webkit-box-shadow: inset 0 0 7px #000;
    box-shadow: inset 0 0 7px #000;

    border: 1px solid gold;
}

... работает только в Chrome и Firefox (не в IE8).

Я попробовал это, что предположительно работает в IE8:

#imgPostTravel:hover {
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

... но это не работает (не добавляет тень в IE8).

Могу ли я что-нибудь сделать, чтобы box-shadow работал в IE8?

B. Clay Shannon 01.10.2015 источник

comment

Возможный дубликат тени блока в IE7 и IE8 - Rob 01.10.2015

comment

На самом деле оказывается, что это IE11 (клянусь стопкой журналов msdn, последний раз, когда я проверял, это был IE8, а это было не так давно). Моя проблема может иметь какое-то отношение к режиму совместимости, который я не могу контролировать, поскольку мета-совместимость, по-видимому, добавляется на более высоком уровне (главная страница). - B. Clay Shannon 01.10.2015

Ответы (2)

arrow_upward
1
arrow_downward

Вы можете попробовать ответить @thirtydot:

Используйте CSS3 PIE, который эмулирует некоторые свойства CSS3 в старых версиях IE.

Он поддерживает box-shadow (за исключением ключевого слова inset).

ИЗМЕНИТЬ:

или вы можете попробовать ответить @Marcus Pope:

filter: 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5), 
  progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);

Возможный дубликат
тени блока в IE7 и IE8
Эффект тени окна CSS3 для IE8?

Kesavamoorthi 01.10.2015

arrow_upward
1
arrow_downward

Вы пытаетесь создать вставку boxshadow в Internet Explorer 5.5–8.

Это вполне возможно.

Вот пример кода с пояснениями:

(ЭТО ОТОБРАЖАЕТСЯ ТОЛЬКО В INTERNET EXPLORER 5.5–8):

#box {
/* Make sure to set it to min-width so you can push the outside "Microsoft Shadow" out of the screen to the left, right, bottom, and top, because the shadow adds pixels to the 100% width whether you set it to width:100% or not, but if you set it to 100% width, you won't be able to make the margin push the outside shadow out. */
  min-width: 100%;
  /* For some reason, the above rule is not the case for height. I'm not sure why for Internet Explorer. */
  height:100%;
  position: relative;
  /* I discoverd the shadow won't even appear unless there is a boder of the same div. That's no big deal, just push the boder out too, along with the bleeding outside Mirosoft Shadow". */
  border: solid 1px black;
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#aaaaaa, Strength=33, Direction=270);
/* For the child, (child id is called "box")... you can only push out the content to the bottom and right, because of the natural left to right, top to bottom HTML layout. */
  margin-bottom: -39px;
  margin-right:130px;
}
.box-parent-fix {
/* This appears to be a hack as far as I know, the bleeding Microsoft Shadow (not the inset part, the outside part is what I'm talking about) will only be pushed out if it has a parent with the follow CSS: */
    position: relative;
    min-width: 100%;
    height: 100%;
}
.box-parent {
/* For the child, (child id is called "box")... you can only push out the content to the bottom and right, because of the natural left to right, top to bottom HTML layout. */
    margin-top:-49px;
    margin-left:-45px;
    height:100%;
    min-width:100%;
    background-color: white;
    position: relative;
}
body {
    position: relative;
    height: 100%;
    min-width:100%;
/* This hides the pushed out bleeding non-inset Microsoft Shadow. Please excuse my ugly sentence, haha. */
    overflow-y: hidden;
    overflow-x: hidden;
}

<body>
    <div class="box-parent-fix">
        <div class="box-parent">
            <div id="box">
 
            </div>
        </div>
    </div>
</body>

Вот скриншот его работы в Internet Explorer 6:

Вот скриншот его работы в Internet Explorer 8:

Stuffed Marshmallow 21.09.2018

comment

Тем не менее, (Нет JavaScript, нет спасения, но знать JavaScript, нет спасения) еще нет JavaScript, чтобы знать [дротик] спасение как [условное] ( [...] скрыть предзнаменование [...] в [...] из [...] ) boot[...] должен знать, что 1 = 1 не означает вечного спасения. (iPhone 3GS с версией Chromebook только для SSD). - Stuffed Marshmallow; 08.06.2019

Можно ли использовать box-shadow в IE8?

Ответы (2)

Вопросы по теме