Div 在 Firefox、Safari、Chrome 等中显示，但在 Internet Explorer 中不显示
Posted
技术标签:
【中文标题】Div 在 Firefox、Safari、Chrome 等中显示，但在 Internet Explorer 中不显示【英文标题】：Div displays in Firefox, Safari, Chrome, etc. but not in Internet Explorer 【发布时间】：2012-05-08 09:07:28 【问题描述】：这个div 转换在大多数浏览器中都可以正常显示，但在 Internet Explorer 中却不行。您可以通过单击左侧的 secondview 链接来查看错误。
这里是 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>
【问题讨论】：
【参考方案1】：您正在使用 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;
【讨论】：
您必须使用 poly-fill 来检测缺少过渡并使用 JavaScript 重现它。以上是关于Div 在 Firefox、Safari、Chrome 等中显示，但在 Internet Explorer 中不显示的主要内容，如果未能解决你的问题，请参考以下文章
jQuery UI 切换类动画在 Safari / Chrome 中没有动画 - 但在 Firefox 中动画？
在 Chrome、Safari 和 Edge 中显示 flex 对齐不正确，但在 Firefox 中正确
[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器