css3 works on jfiddle but not on IE

This is my simple code http://jsfiddle.net/6hLf6/1/

when I open the jsfiddle on my IE, it is working perfectly.

but when I open the code locally, it looks like this:

I am using IE11

this is my css

#loading {
            margin: 80px auto;
            position: relative;
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50px;
               -moz-border-radius: 50px;
                    border-radius: 50px;
            background: #ccc;
            font: 12px "Lucida Grande", Sans-Serif;
            text-align: center;
            line-height: 100px;
            color: white;
            -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
            box-shadow: 0 0 5px rgba(0,0,0,0.5);

        }
        #loading:before {
            content: "";
            position: absolute;
              left: -20px;
               top: -20px;
            bottom: -20px;
             right: -20px;
            -webkit-border-radius: 70px;
               -moz-border-radius: 70px;
                    border-radius: 70px;
            background: #eee;
            z-index: -2;
            -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
        }
        #loading span {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 80px solid rgba(255,255,255,0.7);
            z-index: -1;
            top: -28px;
            left: 0px;
            -webkit-animation: ticktock 5s linear infinite;
            -moz-animation: ticktock 5s linear infinite;
            animation:ticktock 5s linear infinite;
            -webkit-transform-origin: 50px 80px;
            -moz-transform-origin: 50px 80px;
            transform-origin:50px 80px;
        }
        #loading strong {
            overflow: hidden;
            display: block;
            margin: 0 auto;
            -webkit-animation: expand 2.5s linear infinite;
            -moz-animation: expand 2.5s linear infinite;
            animation:expand 2.5s linear infinite;
        }

        @-webkit-keyframes expand {
            0% {
                    width: 0;
            }
            100% {
                    width: 60px;
            }
        }

        @-webkit-keyframes ticktock {
            0% {
                    -webkit-transform: rotate(0);
                    -ms-transform: rotate(0);
                    -moz-transform: rotate(0);
            }
            100% {
                    -webkit-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
            }
        }

        @-moz-keyframes expand {
            0% {
                    width: 0;
            }
            100% {
                    width: 60px;
            }
        }

        @-moz-keyframes ticktock {
            0% {
                    -webkit-transform: rotate(0);
                    -ms-transform: rotate(0);
                    -moz-transform: rotate(0);
            }
            100% {
                    -webkit-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
            }
        }



        @keyframes ticktock {
            0% {
                    -webkit-transform: rotate(0);
                    -ms-transform: rotate(0);
                    -moz-transform: rotate(0);
            }
            100% {
                    -webkit-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
            }
        }


        @keyframes expand {
            0% {
                    width: 0;
            }
            100% {
                    width: 60px;
            }
        }

I tried to handle the css on IE, that is why it is working on jfiddle but not when I run the code on localhost.

what should I do plesae?

Edit html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="loading.css"/>
</head>
<body>

        <div id="loading"><strong>loading...</strong><span></span></div>


</body>
</html>

回答1:

Using XHTML 1.0 strict the following HTML works with your CSS to provide the desired effect.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="index.css" />
    </head>
<body>
    <div id="loading">
        <strong>loading...</strong>
        <span></span>
    </div>
</body>
</html>

Please compare the above code with the HTML you are using.

Edit:

I managed to replicate your error by enabling compatibility mode. Please click on the gear in the top right of internet explorer then click compatibility view settings and check your domain is not on the 'websites you've added to compatibility view' list if it is remove it from the list. Also un-check display intranet sites in compatibility view. Then try opening it.

回答2:

You need to add: