IE 的问题 - 网页无法正常加载
Posted
技术标签:
【中文标题】IE 的问题 - 网页无法正常加载【英文标题】：Problems with IE - Webpage does not load well 【发布时间】：2019-04-26 10:44:53 【问题描述】：我的网站已完全完成，并且在 Google Chrome、Firefox 和除 Internet Explorer 之外的其他浏览器中运行良好。
菜单看不到，它坏了。没有应用边距，文本完全没有形式，就好像没有书店正在加载一样。该网站是使用 bootstrap 3.6 创建的，Jquery 用于处理页面的大部分效果。
你知道 IE 是否不支持 jquery、bootstrap 或任何其他库吗？我网站上的所有库都在本地加载。
页面的内容是通过php加载的，因为所有的内容都在数据库中。它在其他浏览器中运行良好，但在 IE 中运行良好。这个想法是它适用于每个人。
我在脑海中使用这个 css 文件
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Nivamedia | Webdesign, Online Marketing, Mobile Apps</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/et-line-font.css">
<link rel="stylesheet" href="css/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo_themes/default/default.css">
<link rel="stylesheet" href="css/style.css">
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'> -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800" rel="stylesheet" type='text/css'>
</head>
这是我的导航菜单
<body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121888387-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag()dataLayer.push(arguments);
gtag('js', new Date());
gtag('config', 'UA-121888387-1');
</script>
<!-- preloader section -->
<div class="preloader">
<div class="sk-spinner sk-spinner-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</div>
<!-- navigation section -->
<section class="navbar navbar-fixed-top custom-navbar bg-trans" role="navigation" id="navbar_menu">
<div class="container" id="navbar_container">
<div class="navbar-header" id="mobile_version_collapse-in" style="background-color: white !important;">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="toggle_button">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a class="nav-brand" href="index.php"><img src="images/nivaLogo2.png" title="Nivamedia" id="main_logo"></a>
</div>
<div class="collapse navbar-collapse" id="menu_collapse">
<ul class="nav navbar-nav navbar-right" id="list_options">
<li class="list_options_Li"><a href="#" class="smoothScroll itemLi"></a></li>
<li class="list_options_Li" id="first_li_main"><a href="leistungen.php" class="smoothScroll itemLi">Leistungen</a></li>
<li class="list_options_Li" id="second_li_main"><a href="referenzen.php" class="smoothScroll itemLi">Referenzen</a></li>
<li class="list_options_Li" id="third_li_main"><a href="#agentur" class="smoothScroll itemLi">Agentur</a></li>
<li class="list_options_Li" id="fourth_li_main"><a href="kontakt.php" class="smoothScroll itemLi">Kontakt</a></li>
</ul>
</div>
</div>
</section>
我在正文的末尾有这个 js 库：
<script src="js/jquery.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/sweetalert.js"></script>
网站的所有其他页面都有同样的问题。
【问题讨论】：
尝试将此添加到您的<head> 部分：<meta http-equiv="X-UA-Compatible" content="IE=edge">
您可能遇到了 CSS 支持问题。浏览你所有的 css 并根据 caniuse.com 验证它。
@Tico 是的，页面已经有了，但还是不行。
提供信息的帮助为零。
@LouysPatriceBessette 我已经删除了所有重复的 ID，但问题仍然存在，IE 中的页面保持不变
【参考方案1】：
我不确定这个答案是否适合您，但您的 bootstrap.css 文件似乎有问题：https://nivamedia.ch/css/bootstrap.min.css (v3.3.5)
替换这一行：
<link rel="stylesheet" href="css/bootstrap.min.css">
使用更新版本的引导程序 (3.3.7)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
这是我在 IE 中得到的截图：
另外，我应该让您知道您托管的文件已损坏或未使用 UTF-8 编码。检查站点标头是否使用 UTF-8，如果 bootstrap.css 可能已损坏，请尝试下载新文件并重新上传。
这是你的 bootstrap.css：https://nivamedia.ch/css/bootstrap.min.css
里面有很多��������������������。
【讨论】：
你知道吗，几周前这些文件发生在我身上，即使页面没有在 chrome 或其他浏览器中运行，但我再次下载了文件，删除旧文件并将新的。在 chrome 和其他浏览器中它可以工作，但在 IE 中它没有。但我会试试你说的，看看升级到 bootstrap 3.7 是否最终有效。 好的，如果可行，请告诉我们。 引导文件是我目前唯一发现损坏的文件。 这可能解决不了多少问题，但它会帮助浏览器正确编码文件：看起来响应标头中没有默认字符集.它应该显示Content-Type: text/css; charset=UTF-8 。我不使用nginx，所以我不知道你会如何改变它，但你可以搜索一种方式。如果未设置，浏览器可能会使用不同的编码。看起来服务器正在提供 GZIP，所以我不确定是否存在服务器问题，或者是否是 EOL 格式问题。
我更改了引导 css，但现在我记下了 jquery 错误，它不允许我打开页面，因为调试器保持它处于暂停状态，这仅在 IE 中，在其他浏览器中可以正常工作。跨度>
我测试的时候感觉还不错。尝试遵循您看到的错误。我没有得到任何东西，但我可以等我有空的时候看看。
我又看了一遍，一切看起来都很完美，在 Internet Explorer 和 IE (Edge) 中都没有任何错误。一切都按应有的方式响应，并且样式显示正确。您可能只需要清除浏览器缓存。以上是关于IE 的问题 - 网页无法正常加载的主要内容，如果未能解决你的问题，请参考以下文章