Javascript 页面在每个浏览器中显示不同，我可以'；我不明白为什么_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 页面在每个浏览器中显示不同，我可以'；我不明白为什么

javascript jquery html css twitter-bootstrap

Javascript 页面在每个浏览器中显示不同，我可以'；我不明白为什么,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,因此，我试图使我的导航栏关闭时，链接被点击。单击时，链接将指向某个节，而不是指向新页面。导航栏在大屏幕上时，我希望它仍然显示，但在小屏幕上时，我希望汉堡菜单在按下下一个事件链接时自动关闭。有什么想法吗 <body> <nav> <header class="header d-flex align-items-center container-fluid"> <div class="row align-item

因此，我试图使我的导航栏关闭时，链接被点击。单击时，链接将指向某个节，而不是指向新页面。导航栏在大屏幕上时，我希望它仍然显示，但在小屏幕上时，我希望汉堡菜单在按下下一个事件链接时自动关闭。有什么想法吗


<body>
        <nav>
        <header class="header d-flex align-items-center container-fluid">
      <div class="row align-items-center flex-grow-1">
        <div class="col-auto">
          <div class="logo">
                  <h4>thomas<br> venutu</h4>
                </div>
        </div>
            <ul class="nav-links ">
                <li><a href="#section2">Home</a> </li>
                <li><a href="#section2">NextEvent</a> </li>
                <li><a href="index">Music </a> </li>
                <li><a href="index">About</a> </li>
                <li><a href="index">Boooking</a> </li>

            </ul>

            <div class="burger">
                <div class="line2"></div>
                <div class="line1"></div>
                <div class="line3"></div>
            </div>
            </div>
            </header>
        </nav>

需要修理

navLinks.addEventListener('click', () => {
        nav.classList.toggle('nav-active');


    });

Internet explorer可能会跳过媒体查询，以防止使用传统方法进行查询。媒体查询的顺序也很重要

有多种原因会存在

尝试删除

@media only screen and (min-width: 600px) {
}
@media only screen and (min-width: 601px) {
}

这里面的所有代码移到顶部

就这样吧

//for all, including desktop and mobile goes here
html{...

// for less mobile/smartphone and ipad vertical
@media only screen and (max-width: 900px) {
}

// for all mobile/smartphone devices
@media only screen and (max-width: 600px) {
}
...

首先，忘记DreamWeaver浏览器吧。它不是任何东西的可靠指标。永远不要使用它。第二，IE的哪个版本？问题很可能是由于您使用的CSS或JS方法不兼容。“代码没有错误”-没有错误。首先修复列为错误的内容。Microsoft Edge 44.18362.449.0Microsoft EdgeHTML 18.18363和@cbroe我无法理解您的意思Dreamweaver不是这方面的权威。HTML代码仍然包含错误，验证器会向您显示错误。

@media only screen and (min-width: 600px) {
}
@media only screen and (min-width: 601px) {
}

//for all, including desktop and mobile goes here
html{...

// for less mobile/smartphone and ipad vertical
@media only screen and (max-width: 900px) {
}

// for all mobile/smartphone devices
@media only screen and (max-width: 600px) {
}
...