Div在Firefox，Safari，Chrome等中顯示，但不顯示在Internet Explorer中

此div轉換在大多數瀏覽器中顯示正常，但在Internet Exporer中顯示不正常。您可以通過在左側的第二個視圖鏈接上查看錯誤。Div在Firefox，Safari，Chrome等中顯示，但不顯示在Internet Explorer中

下面是HTML和CSS來源：

<!DOCTYPE html> 
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]--> 
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]--> 
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]--> 
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]--> 
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]--> 
<head> 
    <meta charset="UTF-8" /> 
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">--> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Page Transitions with CSS3</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="" /> 
    <meta name="keywords" content="" /> 
    <meta name="author" content="Your name" /> 
     <link rel="shortcut icon" href="../favicon.ico"> 
     <link rel="stylesheet" type="text/css" href="css/demo.css" /> 
     <link rel="stylesheet" type="text/css" href="css/style3.css" /> 
     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/blitzer/jquery-ui.css" type="text/css" /> 
     <link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css' /> 

     <script src="javascript/jquery-1.7.1.min.js" type="text/javascript"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
     <script src="javascript/jquery.easy-confirm-dialog.js"></script> 
</head> 
<body> 
    <div id="home" class="content"> 
    <div class="content"> 
     <center><h2>Div #1</h2></center> 
     Div #1 
    </div> 
</div> 
<!-- /Home --> 

<!-- SecondView --> 
    <div id="secondview" class="panel"> 
      <div class="content"> 
       <center><h2>Div #2</h2> 
      Div #2 
      </div> 
     </div> 
    <!-- /SecondView --> 

<!-- Header with Navigation --> 
    <div id="header"> 
     <ul id="navigation"> 
     <li><a id="link-home" href="#home">Home</a></li> 
     <li><a id="link-secondview" href="#secondview">Second View</a></li> 
     </ul> 
    </div> 
</body> 
</html>

來源

2012-04-27 cyberboxster

您正在使用CSS3過渡，這不適用於IE瀏覽器。從你的CSS。

.panel{ 
    [...] 
    -webkit-transition: all .6s ease-in-out; 
    -moz-transition: all .6s ease-in-out; 
    -o-transition: all .6s ease-in-out; 
    -ms-transition: all .6s ease-in-out; 
    transition: all .6s ease-in-out; 
}

來源

2012-04-27 15:47:14

有什麼我可以做的，使過渡工作在IE瀏覽器？ – cyberboxster 2012-04-27 21:31:58

您將不得不使用poly-fill來檢測缺少轉換並使用JavaScript重現它。 – 2012-04-30 22:39:15

感謝您的建議。 – cyberboxster 2012-05-01 00:44:32

Div在Firefox，Safari，Chrome等中顯示，但不顯示在Internet Explorer中

回答

相關問題