Начальная загрузка фиксированной позиции заголовка панели навигации и тегов привязки в браузерах Internet Explorer и Edge - PullRequest
Новая
       13

Начальная загрузка фиксированной позиции заголовка панели навигации и тегов привязки в браузерах Internet Explorer и Edge

0 голосов
/ 15 февраля 2019

Модераторы: Пожалуйста, не отмечайте этот вопрос как дубликат, так как другие решения не решают проблему для браузеров 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;
}

Источник: смещение привязки html для корректировки фиксированного заголовка 

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

Источник: https://github.com/twbs/bootstrap/issues/1768#issuecomment-46519033 или Исправлено перекрытие заголовка страницы внутри якоря на странице

1 Ответ

0 голосов
/ 18 февраля 2019

Попробуйте использовать инструменты разработчика F12 для проверки стиля html и css, убедитесь, что вы прикрепили стиль css, и связанный стиль css не переопределяется (если стиль css переопределяется, вы можете использовать «! Важное»).

Следующий код хорошо работает на моей стороне (используя 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>

Вывод, подобный этому:

enter image description here

...