css3 适用于 jfiddle 但不适用于 IE-6ren

css3 适用于 jfiddle 但不适用于 IE

转载作者：太空宇宙更新时间：2023-11-04 13:18:30

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

当我在我的 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 上工作，但当我在本地主机上运行代码时却没有。

请问我该怎么办？

编辑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 配合使用以提供所需的效果。

<!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 右上角的齿轮，然后点击兼容性 View 设置，检查您的域是否在“您已添加到兼容性 View 的网站”列表中，如果它已从列表中删除。同时取消选中在兼容性 View 中显示 Intranet 站点。然后尝试打开它。

关于css3 适用于 jfiddle 但不适用于 IE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24232693/

文章推荐： c++ - MFC。保存和加载 CMFCRibbonRichEditCtrl

文章推荐：将 void** 转换为 int 的二维数组 - C

文章推荐： css - 特殊字符无法正确显示(CSS 文件、UTF-8)

javascript - 使用 JFiddle 创建网页
我正在尝试了解如何将以下 JFiddle 示例转换为单个 html 网页: http://jsfiddle.net/zqa511e9/ 哪里做错了？样式和 javascript 代码都没有反射(ref
javascript - 无法使 jfiddle 示例工作
我是 AJAX 编程新手，但我在 jfiddle 上找到了一个与我想要实现的目标非常接近的示例。然而我无法让它发挥作用。我在标题中放置了对同一版本 jquery 的引用，但是当我点击“我的版本”上的提
javascript - Bootstrap 按钮仅适用于 jfiddle，不适用于网页
我是 bootstrap 的新手，我被卡住了。我相信我正在导入正确的脚本以在我的页面上使用 Bootstrap ，但是每当我点击“阅读”按钮时，唯一发生的事情就是“#”被添加到我的网址(侧面导航栏应该
html - 包含全宽 CSS jfiddle 子菜单的水平菜单
我想制作一个水平下拉菜单，很像博闻网的主菜单:http://home.howstuffworks.com/community-living 注意子菜单如何覆盖水平主菜单栏的整个宽度，而不是在垂直列表中
css3 适用于 jfiddle 但不适用于 IE
这是我的简单代码 http://jsfiddle.net/6hLf6/1/ 当我在我的 IE 上打开 jsfiddle 时，它运行良好。但是当我在本地打开代码时，它看起来像这样: 我正在使用 I
Javascript FileReader 在 jfiddle 中工作，但在我的浏览器中不起作用
我有一个文件阅读器，可以在 jfiddle 上运行，但不能在任何浏览器中运行。我使用所有最新的浏览器。它会让我选择文件，但之后什么也没有发生。我对 javascript 很陌生。 javacript
jquery 效果在 jfiddle 中有效，但不能在线 - 请帮忙
几个小时后仍在尝试解决此问题。该脚本在 jfiddle 中运行:http://jsfiddle.net/uCcYw/3/ ,将闪光效果应用于add_item (simplecart_shelfitem
javascript - jquery 鼠标悬停不工作。只在 jfiddle 工作
这只是几行代码:http://jsfiddle.net/z7bHt/ HTML: JavaScript: $("#bowleft").mouseenter(function(){ con
css - 几个小时但仍然停留在下拉子菜单上 - 继承的 css 在父菜单下创建空框 - jfiddle incl
我已经尝试了几个小时来找出如何摆脱出现在我的 CSS 菜单上的奇怪框。有两层子菜单。第二级子菜单位于我想要它的父菜单右侧的位置，但是一旦它出现 - 悬停时 - 父菜单下方也会出现一个相同高度的框。这个
css - 坚持创建 CSS 子菜单，其中一个特定的下拉菜单具有不同的宽度 - jfiddle incl
抱歉，如果这真的很初级，但我有一个打字机博客，上面有一个水平导航菜单。一些子菜单项的名称非常长(每个客户不可更改)——幸运的是它们都在一个“部分”中。由于宽度样式适用于所有子菜单，因此仅加宽子菜单对模
javascript - 短脚本(<50 行)适用于 jfiddle 但不适用于浏览器
我在元素中使用水平滚动图片库。最近滚动停止工作，我一直在试图找出原因。最终我决定回到元素这部分的源代码并开始工作，但我什至无法运行它。我一定是做错了什么——有什么想法吗？ the fiddle 我
javascript - 为什么 jQuery 脚本可以在 jFiddle 上运行，但不能在我的本地机器上运行？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。关闭 7 年前。编辑问题以包含 desired behavior, a specific probl
html - float 无序列表 - 适用于 jfiddle 而不是浏览器(尝试更新 chrome 和 firefox)
我需要 float 一个无序列表。问题是:我做不到。我找到了一个完全符合我需要的 jfiddle(编码器制作了一个列表，使其侧面与上面的一些文本对齐) 这是更新后的 jfiddle 链接: https

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css3 适用于 jfiddle 但不适用于 IE