链接继续跳跃点击鼠标

对不起 - 这可能很简单，但它一直在驱动我loopy一段时间。我网站链接的页脚似乎跳到了新行，因此不会将您带到链接。链接继续跳跃点击鼠标

这是笔记本电脑和平板电脑的风景大小页面。移动页脚工作正常。

我已经尝试给父母div一个高度来阻止它推下来，使位置相对和固定。我在网上搜索了答案，但是人们似乎在鼠标悬停时发生了问题，而不是鼠标点击。我也尝试把所有的东西都放到他们自己的个人分区（最后一件事）。

我已经把所有的代码到的jsfiddle查看和尝试， jsfiddle

先进的感谢。

迈克

p a:hover, 
 
a:focus, 
 
a:visited { 
 
    color: #ffffff; 
 
    background: #333333; 
 
    white-space: nowrap; 
 
} 
 

 
a:active { 
 
    border: none !important; 
 
    display: block; 
 
    white-space: nowrap; 
 
    width: 20%; 
 
} 
 

 
div.homebox a:hover { 
 
    background: #999999; 
 
    white-space: nowrap; 
 
} 
 

 
div.homebox a, 
 
a:focus, 
 
a:active, 
 
a:visited { 
 
    color: #73170E; 
 
    white-space: nowrap; 
 
} 
 

 
div.footerlink a:hover { 
 
    background: #999999; 
 
    white-space: nowrap; 
 
} 
 

 
div.footerlink a, 
 
a:focus, 
 
a:active, 
 
a:visited { 
 
    color: #ff0000; 
 
    white-space: nowrap; 
 
} 
 

 
a img { 
 
    background: none; 
 
} 
 

 
#FooterContainer { 
 
    width: 100%; 
 
    background: #ccc; 
 
    overflow: hidden; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#FooterContact { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 45%; 
 
    margin-left: 30px; 
 
} 
 

 
#FooterLatest { 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 5px; 
 
    width: 30%; 
 
} 
 

 
#FooterSocial { 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 5px; 
 
    width: 15%; 
 
    text-align: center; 
 
    padding-bottom: 10px; 
 
} 
 

 
#social { 
 
    width: 60%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#FooterLegal { 
 
    color: #ffffff; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background: #000000; 
 
} 
 

 
#FooterLegalText { 
 
    border: 1px solid yellow; 
 
    display: inline-block; 
 
    float: right; 
 
    width: 55%; 
 
} 
 

 
.legalprivacy { 
 
    border: 1px solid orange; 
 
    width: 15%; 
 
    top: 0; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.legalcookie { 
 
    border: 1px solid orange; 
 
    width: 20%; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.legalshoptc { 
 
    border: 1px solid orange; 
 
    width: 18%; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.legalaccessibility { 
 
    border: 1px solid orange; 
 
    width: 19%; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.legalsitemap { 
 
    border: 1px solid orange; 
 
    width: 9%; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.legaldot { 
 
    border: 1px solid orange; 
 
    width: 3%; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
#FooterCopyright { 
 
    border: 1px solid white; 
 
    display: inline-block; 
 
    float: left; 
 
    font-size: 12px; 
 
    width: 35%; 
 
} 
 

 
.block_padding { 
 
    padding-top: 40px; 
 
} 
 

 
.connect_fb { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.connect_fb:hover .img-top { 
 
    display: inline; 
 
} 
 

 
.connect_fb .img-top { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 

 
.connect_tweet { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.connect_tweet:hover .img-top { 
 
    display: inline; 
 
} 
 

 
.connect_tweet .img-top { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 

 
.connect_instagram { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.connect_instagram:hover .img-top { 
 
    display: inline; 
 
} 
 

 
.connect_instagram .img-top { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 

 
.connect_pinterest { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.connect_pinterest:hover .img-top { 
 
    display: inline; 
 
} 
 

 
.connect_pinterest .img-top { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 

 
.connect_gplus { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.connect_gplus:hover .img-top { 
 
    display: inline; 
 
} 
 

 
.connect_gplus .img-top { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 

 
.connect_rss { 
 
    width: 32px; 
 
    height: 32px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.connect_rss:hover .img-top { 
 
    display: inline; 
 
} 
 

 
.connect_rss .img-top { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 99; 
 
} 
 

 
#justgive { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    padding-top: 10px; 
 
} 
 

 
#translate { 
 
    padding-top: 10px; 
 
} 
 

 
.contacttable { 
 
    display: table; 
 
    text-align: left; 
 
    width: 90%; 
 
    padding: 0px 0px 3px 0px; 
 
} 
 

 
.contactrow { 
 
    display: table-row; 
 
} 
 

 
.contactcell { 
 
    display: table-cell; 
 
    padding: 3px 0px; 
 
    font-size: 0.9em; 
 
} 
 

 
.contactcellicon { 
 
    display: table-cell; 
 
    width: 5%; 
 
    padding: 3px 10px; 
 
} 
 

 
.contactbody { 
 
    display: table-row-group; 
 
}

<div id="FooterContainer"> 
 
    <div id="FooterContact"> 
 
    <h4><u>Contact Us</u></h4> 
 

 
    <div id="contdetails"> 
 
     <div class="contacttable"> 
 
     <div class="contactbody"> 
 

 
      <div class="contactrow"> 
 
      <div class="contactcellicon"><i class="fa fa-map-marker" aria-hidden="true"></i></div> 
 
      <div class="contactcell">Address Here</div> 
 
      </div> 
 

 
      <div class="contactrow"> 
 
      <div class="contactellicon"><i class="fa fa-phone" aria-hidden="true"></i></div> 
 
      <div class="contactcell">phone</div> 
 
      </div> 
 

 
      <div class="contactrow"> 
 
      <div class="contactcellicon"><i class="fa fa-at" aria-hidden="true"></i></div> 
 
      <div class="contactcell"><a href="mailto:#">email</a></div> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div id="FooterLatest"> 
 

 
    <h4><u>Latest Product News</u></h4> 
 
    <ul class="posts"> 
 
     <?php query_posts('cat=1,3&posts_per_page=4'); while (have_posts()) : the_post(); ?> 
 
     <?php $post_date = get_the_date('j M Y'); echo $post_date; ?> 
 
     <ul style="list-style: none;"> 
 
     <li><a href='<?php the_permalink() ?>'><b><?php the_title(); ?></b></a></li> 
 
     </ul><br> 
 
     <?php endwhile; ?> 
 
     <?php wp_reset_query(); ?> 
 
    </ul> 
 

 
    </div> 
 

 
    <div id="FooterSocial"> 
 
    <div id="social"> 
 
     <div class="connect_fb"> 
 
     <a href="#" target="_blank"> 
 
      <img src="#" /> 
 
      <img src="#" class="img-top" /> 
 
     </a> 
 
     </div> 
 
     <div class="connect_tweet"> 
 
     <a href="#" target="_blank"> 
 
      <img src="#" /> 
 
      <img src="#" class="img-top" /> 
 
     </a> 
 
     </div> 
 
     <div class="connect_instagram"> 
 
     <a href="#" target="_blank"> 
 
      <img src="#" /> 
 
      <img src="#" class="img-top" /> 
 
     </a> 
 
     </div> 
 
     <div class="connect_pinterest"> 
 
     <a href="#" target="_blank"> 
 
      <img src="#" /> 
 
      <img src="#" class="img-top" /> 
 
     </a> 
 
     </div> 
 
     <div class="connect_gplus"> 
 
     <a href="#" target="_blank"> 
 
      <img src="#" /> 
 
      <img src="#" class="img-top" /> 
 
     </a> 
 
     </div> 
 
     <div class="connect_rss"> 
 
     <a href="#"> 
 
      <img src="#" /> 
 
      <img src="#" class="img-top" /> 
 
     </a> 
 
     </div> 
 
    </div> 
 

 
    <div id="justgive"> 
 
     <a href="#" target="_blank"><img src="#" alt="Fundraise On JustGiving"></a> 
 
    </div> 
 

 

 
    </div> 
 
</div> 
 

 
<div id="FooterLegal"> 
 

 
    <div id="FooterCopyright" class="footerlink"> 
 
    &copy; copyright info</div> 
 

 
    <div id="FooterLegalText"> 
 
    <div class="legalprivacy"><span><a href="#">Privacy Policy</a> &emsp; &#9679; &emsp; </span></div> 
 
    <div class="legalcookie"><span><a href="#">Cookie Policy</a> &emsp; &#9679; &emsp; </span></div> 
 
    <div class="legalshoptc"><span><a href="#">Shop T&Cs</a> &emsp; &#9679; &emsp; </span></div> 
 
    <div class="legalaccessibility"><span><a href="#">Accessibility</a> &emsp; &#9679; &emsp; </span></div> 
 
    <div class="legalsitemap"><span><a href="#">Sitemap</a></span></div> 
 
    </div> 
 

 
</div>

来源

2017-06-12 ShootingStar Web Design

你从根本上改变了链接的布局属性为'：active'状态只（显示：块，空白：NOWRAP甚至一个明确指定的宽度） - 当然这将使它在进入该状态时“跳跃”。 – CBroe

顺便说一下，'p a：hover，a：focus，a：visited'和'div.homebox a，a：focus， a：active，a：visited'可能不会选择您想要在此选择的元素。 – CBroe

@CBroe - 正如评论“使用评论以征求更多信息或提出改进意见时占位符文本中所述”，避免在评论中回答问题。 –