我要投稿

html锚链接-HTML 锚链接破坏网站/无法正常工作？

bendan520 html

2023-08-27 0 8,920 百度已收录

进不了网站？换个网络试试！

如何修复 HTML 锚链接破坏网站/无法正常工作？？在开发过程中遇到 HTML 锚链接破坏网站/无法正常工作？如何解决问题？下面主要根据日常开发的经验，给大家介绍一下HTML锚链接破坏网站/无法正常工作的情况？对解决方案有何建议，希望能够帮助您修复破坏网站/无法正常工作的 HTML 锚链接？启发或帮助；问题描述

在我的个人网站上工作时，我发现每当我单击任何 HTML 锚点时，它要么完全破坏了网站html锚链接，要么根本没有链接到页面上的正确位置。一般情况下，在 Firefox 上会发生这种情况，但该网站在 Edge 和 Chrome 上运行良好。

该网站的实时版本在这里：

这个问题在使用 Firefox 时最为明显；当我使用 Edge 测试我的网站时，我没有遇到任何问题。我尝试减轻 HTML 和 CSS 的重量，看看是否可以查明问题html锚链接，但我始终无法找出是哪些导致了错误。任何有助于找出问题所在的帮助都会有所帮助。我删除了所有外部 js 文件。

@charset "UTF-8";
    /* CSS Document */
    html
    {
    overflow-x:hidden;
    scroll-behavior: smooth;
    }
    body
    {
    min-height: 500vh;
    max-width: 100vw;
    width: 100%;
    font-family: 'Roboto Slab',serif;
    
    overflow: hidden;
    position: absolute;
    left: -13px;
    z-index: -3;
    /*outline: 1px solid red;*/
    }
    .displaySection
    {
    position: relative;
    top: 100vh;
    left: 0;
    
    width: 100%;    
    background-color: red;
    padding: 20px 0 20px;
    margin: 5px 0 5px 5px;
    
    min-height: 100vh;
    overflow-y: visible;
    overflow-x: hidden;
    }
    a
    {
    text-decoration: none;
    }
    ul
    {
    list-style: none;
    }
    hr
    {
    margin: 50px 10px 10px 10px;
    }
    #wrapper
    {   
    width:100vw;    
    }
    #NameDrop
    {
    position: relative;
    top: 50vh;
    transform: translateY(-60%);
    
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
    z-index: 5;
        
    }
    #NameDrop ul 
    {
    text-decoration-line: none;
    list-style-type: none;
    margin: 0 auto;
    left: 40%;
    }
    #NameDrop ul li
    {
    text-decoration-line: none;
    display: inline;
    text-align: center;
    width: 25%;
    margin: 0 auto;
    
    }
    #NameDrop li a
    {
    display:inline-block;
    position: relative;
    padding:10px 20px;
    left: -20px;
    color: black;
    text-decoration-line: none;
    font-size: 14pt;
    border-radius: 30px;
    
    opacity: 1;
    
    /* Safari 4.0 - 8.0 */
    -webkit-animation-name: SlowFade;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.7s;
    -webkit-animation-iteration-count: 1;
    /* Standard syntax */
    animation-name: SlowFade; 
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0.7s;
    animation-iteration-count: 1;
    animation-direction: forwards;
    animation-fill-mode: forwards;
    
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    -mozilla-transition: 0.3s;
    transition: 0.3s;
    
    }
    #NameDrop li a:hover
    {
    background-color:rgba(151,2,1.00);
    color: white;
    text-decoration-line: none;
    }



    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">
    
    
    
    
    
    function snapToAnchor(anchor)
    {
        document.getElementById(anchor).scrollIntoView(true);
    }
    
    
     
     
    
     
    
    
        About
        Design
        Experience
        Education
        Cont3209abddc61d4fdd8da7bbca048d591b