Альтернатива Inset boxshadow для Internet Explorer 8 - PullRequest
Новая
       24

Альтернатива Inset boxshadow для Internet Explorer 8

0 голосов
/ 21 сентября 2018

Я очень близок к получению встроенной тени для IE8 без необходимости JavaScript.

Вот скриншот:

enter image description here

Поскольку Internet Explorer с 5.5 по 8 поддерживает только «тени» и «тени» от Microsoft вместо теней, я должен использовать этот код: 

#box {
  /* CSS for all browsers.  Note if there is no background-color, the box will be transparent */
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=270);
}
<body>
    <div id="box">

    </div>
</body>

(тени отображаются только в IE5.5–8, потому что тени и отбрасываемые тени были удалены из IE9, заменены boxshadows).

IЯ могу удалить тень изнутри коробки, выполнив это: 

#box {
  /* CSS for all browsers.  Note there is now a background-color, the box will not be transparent */
  background-color:white;
  border: solid 1px #808080;
  margin: 10px;
  padding: 10px;
   zoom: 1;
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#ececec, Strength=33, Direction=270);
}
<body>
    <div id="box">

    </div>
</body>

Тогда это выглядит так:

enter image description here

Но как бы я былв состоянии сделать вставку тень только , куда ушла внешняя тень?

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Я нашел решение после нескольких часов подстройки.

Это работает, только если вы хотите подвинуть div с вложенной тенью к краям экрана.Вероятно, есть способ заставить его работать, не используя края экрана, чтобы скрыть не вставленные тени, но я не уверен, как.

К счастью для меня, это не о чем беспокоитьсямой сайт.

Вот изображение окончательного результата:

enter image description here

Вот код: 

#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;
  /* This code is for the Microsoft Shadow (boxshadow for Internet Explorer 5.5 through 8 alternative). Please note how there needs to be a seperate shadow for each direction, starting at zero degrees and the last direction is 270 degrees. */
  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:-44px;
    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. The inset shadow isn't hidden because it's inside the screen.*/
    overflow-y: hidden;
    overflow-x: hidden;
}
<body>
    <div class="box-parent-fix">
        <div class="box-parent">
            <div id="box">

            </div>
        </div>
    </div>
</body>
0 голосов
/ 21 сентября 2018

В соответствии с моим поиском, я обнаружил, что вы можете создавать другие тени только с помощью CSS, но я не получил никакой документации для создания тени врезки.

Я нахожу некоторые учебные пособия по созданию тени в IE 8, ноте используют javascript, который вы не хотите использовать.

Так что кроме этого, у меня не было никакого способа создать тень вставки, просто используя CSS в IE 8.

Если возможно дляЗатем вы можете попытаться избежать использования тени-врезки и использовать любую другую тень, поддерживаемую IE.

...