Geek Answers Handbook

Box-shadow with Safari and Chrome and IE

There is some odd situation when it comes to shadow shadows in Chrome and Safari.

When I use box-shadow, Chrome Browser in recent versions supports the CSS3 specification without a prefix -webkit-*, but Safari does not.

It's not so bad if Chrome just overwrites -webkit-box-shadowwith the help box-shadowit does when both shadows are the same.

So, in order to have my shadow in Chrome and Safari, I need the following.

.some-class {
   box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.65);
   -webkit-box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.65);
}

which works great in Safari and in Chrome and in FF and Opera

But for IE9, the box shadow looks ugly. I should have a different shadow for IE9, I need to usebox-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);

So my CSS is as follows

.some-class {
   box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);
   -webkit-box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.65);
}

But I don't want FF to have IE9 box-shadow, so I am inserting a CSS hack

.some-class {
-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
}
/* IE9 */
@media all and (min-width:0) {
    .some-class  > ul.navigationlist{
         box-shadow: 0 0 4px 1px rgba(0,0,0,0.35) \0/;
    }
}

: ? , , , , , ...

:
IE9, , FF Chrome?


3- :
, -ms-* box-shadow, -ms-box-shadow ?

+5
3

, , , , , , IE.

.some-class {
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
}
+4

-moz-box-shadow FF

EDIT: -ms css3, , , IE9 -ms-box-shadow, , , -ms-behavior, -ms-filter ..

0

IE9:

<style>
/*regular css*/
</style>

<!--[if IE 9]>
<style>
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);
</style>
<![endif]-->
-1

More articles:


All Articles