[英]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. 此div
转换在大多数浏览器中都可以正常显示,但在Internet Exporer中则不行。 You can see the error by clcking on the secondview link on the left. 您可以通过单击左侧的第二个视图链接来查看错误。
Here is the HTML and CSS source: 这是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>
You are using CSS3 for the transition, which is not available for IE. 您正在使用CSS3进行转换,这不适用于IE。 From your CSS. 从你的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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.