Question

当我在IE上打开jsfiddle时，它运行正常。

但是当我在本地打开代码时，它看起来像这样： enter image description here

我正在使用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上运行代码的时候。

我该怎么做plesae？

编辑 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>

Answer 1

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

<!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进行比较。

编辑：

我设法通过启用兼容模式来复制您的错误。请单击Internet Explorer右上角的齿轮，然后单击兼容性视图设置，并检查您的域是否在“已添加到兼容性视图的网站”列表中，如果它从列表中删除它。同时取消选中兼容性视图中的Intranet站点。然后尝试打开它。

Answer 2

您需要添加：

<!DOCTYPE html>

在代码的顶部，否则页面将不会使用ie 11

显示

css3适用于jsfiddle，但不适用于IE

2 个答案: