Why does IE8 and below rotate the container but not the content?

Question

I have a container with a background image and a span element with text. IE9, 10, and modern browsers are fine but ie7 and 8 does not rotate the content. It does, however, rotate to container.

I tried posting in jsfiddle but jsfiddle won't run in IE8 (at least when I tried it).

I've tried these:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

and

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand');

Both work in IE9 and 10 but not IE8 and below.

The matrix filter should work in IE8. Do you get any error messages? Perhaps ActiveX Controls are disabled because of local security settings or an invalid doctype. Make sure IE7/8 are not running in quirks mode. — nullability, Jun 13 '13 at 15:59
no errors, not running in quirks mode, and the doctype is the HTML5 doctype. — dcp3450, Jun 13 '13 at 16:05
I'm not sure if this will help, but some browsers just don't support certain things. http://caniuse.com/#compare=ie+7,ie+8,ie+9,ie+10 — RoyalleBlue, Jun 13 '13 at 21:19
What's the `position:`ing of the container and the content? I've got a demo that [does what you're trying to do on this question](http://stackoverflow.com/questions/17490216/) including if spans are added in IE8, where the container is `position: absolute;` and any content spans I add are default position. [See also this Q where child is pos:absolute](http://stackoverflow.com/questions/7793415). Also, when you test are you testing in IE8 itself, or IE10 in IE8 mode? Because [IE10's default security settings deactivate "legacy filters"](http://stackoverflow.com/questions/16340945/) — user56reinstatemonica8, Jul 05 '13 at 13:48

score 0 · Answer 1 · answered Aug 06 '13 at 21:12

0

Are you searching for the ms-writing-mode property? This should have support for at least IE8. I'm not quite sure about 7 and I don't have a browser to test it on.

answered Aug 06 '13 at 21:12

Crash Landing

23
5

Which property value are you suggesting would fix this problem? – Kalina Sep 23 '13 at 20:55

score 0 · Answer 2 · answered Mar 04 '14 at 15:08

I just bumped into this problem and I fixed it by setting z-index (to value 1 in my case) to the container. This made its child elements rotate along with the filter on the container.

Please note that my container was absolutely positioned, so I'd recommend absolute or relative.

Why does IE8 and below rotate the container but not the content?

2 Answers2