css3在jfiddle工作，但不是在IE [英] css3 works on jfiddle but not on IE

问题描述

这是我的简单代码
http://jsfiddle.net/6hLf6/1/

当我在我的IE上打开jsfiddle时，它工作正常。

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

在本地打开代码，它看起来像这样：

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

我使用IE11

这是我的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;
            }
        }

我试图在IE上处理css，为什么它在jfiddle工作，但不是当我在localhost上运行代码。

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.

我应该怎么办plesae？

what should I do plesae?

Edit
html

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>

推荐答案

使用XHTML 1.0严格以下HTML与您的CSS以提供所需的效果。

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>

请将上述代码与您使用的HTML进行比较。

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

编辑：

我设法通过启用兼容模式。请点击互联网浏览器右上角的齿轮，然后点击兼容性视图设置，如果将其从列表中删除，请检查您的域是否不在添加到兼容性视图的网站列表中。还要在兼容性视图中取消选中显示内部网站点。然后尝试打开它。

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.

这篇关于css3在jfiddle工作，但不是在IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！