Question

主持人：请不要将此问题标记为重复，因为其他解决方案不能解决Internet Explorer和Edge浏览器的问题。

对于具有固定位置的Bootstrap导航栏标头，Internet Explorer和Edge浏览器中的标头覆盖了定位标记。

寻找一种使锚点从标头高度偏移的方法。

Stack Overflow中建议的流行解决方案没有适用于Internet Explorer和Edge浏览器的解决方案。

首选项适用于HTML或CSS。

以下流行的解决方案在Internet Explorer和Edge浏览器中不起作用。实际上，浏览器甚至没有跳过这些解决方案的锚点。

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

来源：offsetting an html anchor to adjust for fixed header

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

来源：https://github.com/twbs/bootstrap/issues/1768#issuecomment-46519033或Fixed page header overlaps in-page anchors

Answer 1

尝试使用F12开发人员工具检查html和css样式，确保已附加css样式，并且相关的css样式未被覆盖（如果css样式被覆盖，则可以使用“！important”）

以下代码对我而言效果很好（使用IE 11和Edge浏览器），您可以参考它：

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <style type="text/css">
        a.anchor {
            display: block;
            position: relative;
            top: 10px;            
            }
    </style>
</head>
<body style="height:1500px">

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a class="anchor" href="#">Page 1</a></li>
                <li><a class="anchor" href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </nav>

    <div class="container" style="margin-top:50px">
        <h3>Fixed Navbar</h3>
   </div>
</body>

这样的输出：

在Internet Explorer和Edge浏览器中引导固定位置的导航栏标题和锚标记

1 个答案: