box-shadow being cut off

Question

While using CSS3\'s box-shadow I am having an issue I do not usually have.

The box shadow usually just bleeds over the div edges, but not on this one.

Answer 1

I have run into this problem multiple times with IE, and the best solution I've found is to use a transparent outline around the div. This seems to prevent IE from clipping the box shadow, as it does even in cases where Gecko and Webkit don't. One great thing about using outline to fix this problem is that it doesn't affect the position of the div.

For example, I had a div with which I had used position: absolute and bottom: -30px to put it in a certain place relative to its parent div. IE, and only IE, was cutting off the top and bottom of the box shadow. Adding this outline fixed it, without changing the position.

outline: 10px solid transparent;