I have a weird issue when using box-shadow to apply a padding to the left and right side of a span which has its contents wrapping inside a container:
box-shadow:9px 0px 0px red, -9px 0px 0px red;
It applies the left shadow only to the first line, and the right shadow only to the last line.
http://jsfiddle.net/3zeL5ux8/2/ is a testcase that works as expected in Chrome and various IE versions (see http://imgur.com/XhX1kco for a perfect rendering), why does Firefox mess it up?
you can try:
-moz-box-shadow:9px 0px 0px red, -9px 0px 0px red;
let me know the output. Can't debug right now.
Cheers
You have to use all different box shadow property for all broweser, try following code :-
-moz-box-shadow: 9px 0px 0px red, -9px 0px 0px red;
-webkit-box-shadow: 9px 0px 0px red, -9px 0px 0px red;
box-shadow: 9px 0px 0px red, -9px 0px 0px red;
The answer is a property called box-decoration-break: clone;. This brings Firefox up to speed with IE and Chrome...