部署后 11 IE 中的标题和导航标签无法正常工作答案

【问题标题】：Header & Nav tags not working properly in 11 IE after deployment部署后 11 IE 中的标题和导航标签无法正常工作
【发布时间】：2021-01-12 14:30:15
【问题描述】：

当我将 IE 中的 HTML 元素部署到服务器后，当我检查所有浏览器（如 Chrome、IE 等）中的元素时，我发现 IE 中的 HTML 元素出现问题，如下所示

<head> 
  <link rel="stylesheet" href="style.css" />
</head>

<header class="header header-v1">
            <div class="logo">
            <a href="Home.html"><img src="images/Header/logo.png" class="img-responsive" alt="Image"></a>
            </div><!-- End Logo -->
            <nav class="navi-desktop-site">
                <ul class="navi-level-1">
                    <li class="has-sub p1"><a>Home<i class="fa fa-angle-down"></i></a>

                        <ul class="navi-level-2 ">
                            <li><a href="#" >Tes1</a></li>
                            <li><a href="#" >Tes2</a></li>
                            <li><a href="#">More +</a></li>
                        
                        </ul>
                    </li>
                    
                    
                        <li class="has-sub p1"><a>Contact Us<i class="fa fa-angle-down"></i></a>

                        <ul class="navi-level-2 ">
                            <li><a href="#" >Email</a></li>
                            <li><a href="#" >More +</a></li>
                        
                        
                        </ul>
                    </li>
                </ul>
            </nav> <!-- End Navi Desktop -->
            <div class="navi-right">


                <div title="library" class="circle-wrapper">
                    <div class="lib circle"></div>
                    <div class="icon">
                    </div>
                </div>
         

            </div>
        </header><!-- END HEADER -->

将页面部署到服务器后，样式无法正常工作，然后我尝试检查 11 IE 中的元素，发现如下代码所示

<header class="header header-v1"></header>
   <nav class="navi-desktop-site"></nav>
           <ul class="navi-level-1">
                    <li class="has-sub p1"><a>Home<i class="fa fa-angle-down"></i></a>

                        <ul class="navi-level-2 ">
                            <li><a href="#" >Tes1</a></li>
                            <li><a href="#" >Tes2</a></li>
                            <li><a href="#">More +</a></li>
                        
                        </ul>
                    </li>
                    
                    
                        <li class="has-sub p1"><a>Contact Us<i class="fa fa-angle-down"></i></a>

                        <ul class="navi-level-2 ">
                            <li><a href="#" >Email</a></li>
                            <li><a href="#" >More +</a></li>
                        
                        
                        </ul>
                    </li>
                </ul>
<div class=navi-right sizzle1601118057090=[object Object]>

                <div title="library" class="circle-wrapper">
                    <div class="lib circle"></div>
                    <div class="icon">
                    </div>
                </div>
</div>

我不知道为什么在部署后会发生这种情况你对这个问题有什么想法吗

【问题讨论】：

IE 是旧的过时浏览器，从来都不是一个好的浏览器。 IE 的任何问题都是 IE 案例。请使用不同的浏览器 - 如果您在 win7 上工作，仍然可以使用更好的浏览器。也使用validator.w3.org/unicorn，并澄清您的问题 - 这是浏览器问题还是代码问题？
我已经在 Chrome、Edge 和 firefox 中测试了该页面。它工作正常。我只在 IE @blackblue 上遇到过这个问题
这一定是IE懒惰或IE bug。请使用提到的 w3c 验证器进行测试，并在您的问题中提供结果。您对 IE7 等有任何 hack 或 css 中的任何新功能吗？ (float, flex, grid,...)

标签： html internet-explorer

【解决方案1】：

<header> 和 <nav> 都是 HTML5 标签，仅受 IE 9+ 支持。

我猜你在将页面部署到服务器后，在 IE 的兼容性视图中查看该页面。请检查 F12 开发工具中模拟的文档模式，看看它是否低于 IE 9。我可以使用低于 9 的 IE 模拟版本重现您的问题：

请从兼容性视图站点列表中删除该站点或在您的代码中添加以下元标记，然后尝试在 IE 11 中再次检查该页面：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

参考：

<nav> Browser Compatibility

<header> Browser Compatibility

【讨论】：

我已经尝试添加它，这正是我需要的。现在它在 IE 中也能完美运行，非常感谢