链接在鼠标点击时不断跳跃

Question

对不起 - 这可能真的很简单，但它已经让我发疯了一段时间了。我的网站链接的页脚似乎跳到了新行，因此不会将您带到该链接。

这是笔记本电脑和平板电脑横向尺寸的页面。移动页脚工作正常。

我尝试给父 div 一个高度以阻止它向下推，使位置相对和固定。我在网上搜索了答案，但人们似乎在鼠标悬停时遇到了问题，而不是在鼠标点击时。我也尝试将所有内容放入他们自己的个人 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>

Answer 1

@CBroe 是对的，但是要否定这种行为并提供某种解决方案，请尝试在页脚锚点中添加类似这样的东西；

div.footerlink a {display: inline-block;}

JS Fiddle

问候， -B