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

问题

This div transition displays fine in most browsers, but not in Internet Exporer. You can see the error by clcking on the secondview link on the left.

Here is the HTML and CSS source:

<!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>

回答1:

You are using CSS3 for the transition, which 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;
}

来源：https://stackoverflow.com/questions/10353655/div-displays-in-firefox-safari-chrome-etc-but-not-in-internet-explorer

标签

css

internet-explorer

html

css-transitions