Geek asks and answers

Div displays in Firefox, Safari, Chrome, etc., but not in Internet Explorer

This transition is divdisplayed in most browsers, but not in Internet Exporer. You can see this error by clicking the second view link on the left.

Here is the source of HTML and 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>
+3
source share
1 answer

You are using CSS3 for a transition that is not available for IE. From your 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;
}
+2
source

More articles:


All Articles