Div 在 Firefox、Safari、Chrome 等中显示,但不显示在 Internet Explorer 中



这个div转换在大多数浏览器中显示正常,但在Internet Exporer中显示不行。您可以通过点击左侧的第二个视图链接来查看错误。

以下是 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>

您正在使用 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;
}

相关内容

  • 没有找到相关文章

最新更新