Font Awesome icon not display on IE9 compatibility view
Question
In a project I have use font Awesome icon to display icon in default format like . It's working fine on Chrome, FireFox and IE9 & IE11 but not display on compatibility view.
I have used meta tag to force render the document but its not working. Also when in compatibility view some css look not like standard view as other browser.
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
Actually, my page generate through 'xsl' template thats why I also used htm5 JS as follows -
<xsl:comment>
<![CDATA[[if lt IE 9]>
<script src="js/jquery/html5shiv.min.js" type="text/javascript" />
<script src="js/jquery/respond.js" type="text/javascript" />
<![endif]]]>
</xsl:comment>
And here is my HTML structure in IE9 Campatibility mode -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-16" http-equiv="Content-Type">
<meta content="IE=9; IE=8; IE=7; IE=EDGE" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/picdef.css?ver=T1.0" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css?ver=T1.0" media="screen">
<link rel="stylesheet" type="text/css" href="css/print.css?ver=T1.0" media="print">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css?ver=T1.0" media="screen">
<link rel="SHORTCUT ICON" href="images/favicon.ico">
</head>
<body>
..................................
</body>
</html>
I found in DOM that html5 js not loaded.
Any solution? sorry for bad english.
1 answers
solution1
1 2016-10-12 21:22:34
Your compatibility mode settings are telling IE to use IE7-compatibility mode.
Please note that Font Awesome does not work in IE7 (nor in IE7-compatibility mode), because IE7 lacks support for several key features that Font Awesome uses.
Even IE8 support is poor in Font Awesome. Ideally you should only consider supporting IE9 and higher.
So your best option is to drop compatibility mode. Change your meta tag like this:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
... that is, remove the IE=9; IE=8; IE=7; IE=9; IE=8; IE=7; .
If you really do need your site to support IE7 and IE8 then you will need to re-think your site design, and use older techniques to create it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.