CSS3工作在jfiddle但不能在IE

這是我簡單的代碼 http://jsfiddle.net/6hLf6/1/CSS3工作在jfiddle但不能在IE

當我打開的jsfiddle我的IE瀏覽器，它可以正常使用。

，但是當我在本地打開的代碼，它看起來像這樣： 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>

來源

2014-06-15 Marco Dinatsoli

您處於兼容模式嗎？ – SLaks

也顯示您的HTML。 –

@SLaks我不知道，請問這是什麼，以及如何知道我是否在兼容模式下 –

使用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站點。然後嘗試打開它。

來源

2014-06-15 18:33:39 Oracle

如果這沒有意義，請發佈您的HTML，我會看看。 – Oracle

你的解決方案沒有改變我的問題，我添加了整個HTML，請檢查編輯的問題 –

@Marco Dinatsoli讓我知道當你嘗試這個時會發生什麼。 – Oracle

您需要添加：

<!DOCTYPE html>

在你的代碼，否則該頁面將不會顯示的頂部即使用11

來源

2014-06-15 18:26:58 Hive7

不錯的猜測，但IE 11似乎也支持兼容模式下的相關CSS屬性。 –

我已經在我的html頁面的頂部。 –

CSS3工作在jfiddle但不能在IE

回答

相關問題