Menu
I'm trying to rotate text in IE8. According to this answer, it should be possible to rotate an element as tried in the following example:
<!DOCTYPE html>
<html>
<head>
<style>
#enclosing {
width: 20px;
height: 100px;
border: 1px solid;
}
#rotated {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, SizingMethod='auto expand')";
width: 100px;
}
</style>
</head>
<body>
<div id="enclosing">
<p id="rotated">rotated</p>
</div>
</body>
</html>
(got the numbers from this generator)
If I inspect the p element with the dev tools I can see it is somehow affected, because the blue border showing the selected element is rotated correctly (but the actual element is not being rotated), see image below.
Edit: For clarification, this is how it looks without the filter statement:
257
Your current markup works, the problem is that you have to enable legacy filters in IE10 to properly render your results in IE10 running in IE8-mode.
So, the answer then is to enable legacy filters: http://blogs.msdn.com/b/ie/archive/2012/06/04/legacy-dx-filters-removed-from-ie10-release-preview.aspx
Go to "Settings [Gear]" >> "Internet Options" >> "Security" Then click "Custom Level" and scroll way down in the resulting window-pane to find the "Render legacy filters" option. Enable it.
99
Given that you've clarified in the comments that you're testing in IE10's IE8 Comaptibility mode, rather than a real copy of IE8, this becomes easier to answer. The answer to your problem is explained here on MSDN
In short, IE10 considers the filter style to be obsolete and disables it by default even in compatibility mode. The can be enabled, but only by the end user.
IE9 is not affected by this; filter styles work fine in IE9, but for IE10 you will have a problem.
To quote:
For Internet Explorer 10, DX filters won't work (are obsolete) in the following document modes:
- Quirks mode
- IE10 standards mode
For other document modes, DX filters are (by default) disabled for the Internet Zone and enabled for the Local Intranet and Trusted Sites zones. This affects the following document modes:
- IE9 Standards mode
- IE8 Standards mode
- IE7 Standards mode
- IE5 (Quirks) mode
End-users can change these settings (for these document modes only) by using Internet Options to change the security settings for the zone in question. Administrators can also use Group Policy.
Note For security and performance reasons, this is strongly discouraged. In addition, webpages cannot modify these settings (generally for the same reasons).
The upshot of this is that for IE10, you cannot reliably use filter styles in compatibility mode.
This means that:
Using compatibility mode to test that your code works in older IEs is not a good test. You really need to use real copies of old IE versions in order to have an accurate test.
It is a bad idea to allow your site to be displayed using compatibility mode by your users. Force them to view the site in IEs best rendering mode using the X-UA-Compatible meta tag.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
