主页没有响应 Internet Explorer 11答案

【问题标题】：Homepage not responsive with Internet Explorer 11主页没有响应 Internet Explorer 11
【发布时间】：2014-10-08 18:14:25
【问题描述】：

我很困惑！我制作了一个简单的网页，仅显示图像和一些文字。它反应灵敏，在 Firefox、Chrome、Safari 和 Internet Explorer 10 中运行良好，但在 Internet Explorer 11 中却不行。

问题是它没有响应，加载需要很长时间，并且在 Internet Explorer 11 中不显示 Font Awesome 图标。这可能是什么原因以及如何解决这个问题？真的很感激一些帮助，因为当我四处搜索时我找不到任何解决方案。谢谢！

@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);

a {
text-decoration: none;
color: #2952a1;
}

html
{
overflow-y: scroll;
}

body {
margin:0; 
padding:0; 
height:100%; 
color: #7F7F7F;
height: 100%;
}

#wrapper {
margin-top: 2%;
width: 100%;
height: 100%;
}

#card {
height: 100%;
margin: 0 auto;
width: 80%;
}

#mobileH1 {
display: none;
}

#desktopH1 {
display: block;
}

#leftSide {
height: auto;
float: left;
width: 50%;
}

#rightSide {
padding-top: 5%;
float: right;
width: 49%;
height: auto;
}

#leftSide img {
display: block;
height: auto;
width: 100%;
padding-top: 1%;
margin: 0 auto;
}

h1 {
text-align: left;
font-family: 'Shadows Into Light', cursive;
font-weight: 400;
font-size: 55px;
margin: 0;
}

p {
font-family: 'Dancing Script', cursive;
font-family: 'Shadows Into Light', cursive;
font-size: 28px;
margin: 0;
padding: 10px;
}

@media only screen and (min-width: 150px) and (max-width: 768px)
{

#mobileH1 {
display: block;
}

#desktopH1 {
display: none;
}

#card {
width: 90%;
}

#leftSide {
width: 100%;
}

#rightSide {
float: left;
padding-top: 0;
width: 100%;
}

#leftSide img {
width: 80%;
padding-top: 1%;
}

h1 {
font-size: 36px;
text-align: center;
}

p {
font-size: 24px;
}

}

@media only screen and (min-width: 150px) and (max-width: 320px)
{
h1 {
font-size: 28px;
text-align: center;
}
}

<!DOCTYPE html>
<html lang="sv"> 
<head>
	<title>Konstkort & affischer</title>
	<meta name="description" content="Description text" />
	<meta name="viewport" content="width=width-device, initial-scale=1" />
	<meta charset="utf-8" />
	<link href="stylesheet.css" rel="stylesheet" type="text/css">
	<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
	
<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
	
</head>
	<body>
		<div id="wrapper">
			<div id="card">
				<div id="leftSide">
				<h1 id="mobileH1">Headline!</h1>
				<img src="bilder/blomma.jpg"/>
				</div>
				<div id="rightSide">
				<h1 id="desktopH1">Headline</h1>
				<p>
				Text
				</p> 
				 <p>
				<i class="fa fa-phone fa-lg"></i> Phone number<br>
				<i class="fa fa-envelope fa-lg"></i> Mail
				</p>
				</div>
			</div>
		</div>
	</body>
</html>

【问题讨论】：

您是在 IE11 的实际版本中查看该站点，还是在模拟器中查看该站点？之前有一些错误，google、yahoo、bootstrap 和许多其他网站看起来很奇怪，但已经解决了。可能想尝试使用 IE 边缘元标记，看看是否有帮助。

标签： css html internet-explorer responsive-design

【解决方案1】：

您似乎已经从您的 css 文件中编写了正确的 div 标签，我们认为这不是代码中的问题，这可能是它在其他浏览器以及 Internet Explorer 10 中加载的原因。请尝试以下操作解决“Internet Explorer 11”无法加载网页时常见问题的建议。

您可能想要关闭跟踪保护和 ActiveX 过滤在“Internet Explorer 11”浏览器（工具选项）中。跟踪保护和 ActiveX 过滤通过阻止图像或其他可能危及您的安全或隐私的内容。

如果问题仍然存在，请尝试重置 Internet Explorer 的安全设置

打开桌面，然后点击或单击 Internet Explorer 图标任务栏。点击或单击工具按钮工具按钮，然后点击或单击 Internet 选项。

在“安全”选项卡上，点击或单击“默认级别”，然后点击或单击好的。

如果这些建议都不起作用，您可以尝试将 Internet Explorer 重置为其默认设置。

希望这会有所帮助！

【讨论】：

使用 IE11 的访问者，他们是否也应该这样做才能查看网页！？