{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 叼着烟拽天下 的问题《Why isn't this element rotation working?》','https://www.manongdao.com/q-230201.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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:
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
filterstyle 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;
filterstyles work fine in IE9, but for IE10 you will have a problem.To quote:
The upshot of this is that for IE10, you cannot reliably use
filterstyles 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-Compatiblemeta tag.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.