CSS Transform Property - Inconsistent results on IE9 & IE10

231 Views Asked by At

Title:CSS Transform Property - Inconsistent results on IE9 & IE10

This bog standard w3schools demo code below performs inconsistently when viewed on IE9 & IE10. The issue is a failure to recognise the transform property.

Works when opened with a file stored locally on a computer (ie.Desktop)
Fails when opened on a stored on a share drive e.g. A web server but accessed directly (not via http)
Works when the same file on the share is opened via a http reference.

Trying to identify the differentiating factors.

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 200px;
    height: 100px;
    background-color: yellow;
    /* Rotate div */
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}
</style>
</head>
<body>

<div>Hello</div>
<br>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the transform property.</p>
<p><b>Note:</b> Internet Explorer 9 supports an alternative, the -ms-transform property. Newer versions of IE support the transform property (do not need the ms prefix).</p>
<p><b>Note:</b> Chrome, Safari and Opera supports an alternative, the -webkit-transform property.</p>

</body>
</html>
2

There are 2 best solutions below

0
On

Latest w3schools code is

div {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
      transform: rotate(7deg);
   }

http://www.w3schools.com/cssref/css3_pr_transform.asp

0
On

It looks like the issue was the browser switching in to Quirks Mode in certain contexts, and the fix was to add this to the top of the head...

<meta http-equiv="x-ua-compatible" content="IE=Edge"/>

I presume that's still valid code for forcing latest Standards Mode.