Clickable area rotated hyperlinks in IE?


When rotating hyperlinks in Internet Explorer 9, the painting to the screen seems to be handled fine, but the clickable area doesn’t appear to respect this.

Whether the rotation is done with -ms-transform, filter, or -ms-filter doesn’t seem to matter. It also doesn’t seem to matter whether you rotate the hyperlink itself (a:link), or its container (for example a div). With the latter, overflow:hidden isn’t respected either (again, for the clickable area; the painted area is clipped as expected).

Is there any way to fix this, or should I fall back to area[coords] (which, of course, is not preferable)?

Problem courtesy of: ACJ


Sadly i'm having the same issue when trying to turn a button for 90 degrees. The clickable area in IE is only on the top of the button. Shitty IE =[

I really don't want to use an image for a button...

Found out this thread: Rotating clickable elements in IE8+ maybe it will help you (and me)...

Solution courtesy of: sumone


Check out this solution (Rotating the button using CSS3 and applying it on absolute right position doesn't work)

Copying text here for reference:

I've fixed it by using -ms-transform: rotate(-90deg); Somehow that wasn't added in the generator i've used online. Clickable area works now in IE. – user1466179

Discussion courtesy of: Surekha

This recipe can be found in it's original form on Stack Over Flow.