html - Bootstrap 类导致页脚内容在悬停之前无法完全加载

Question

我的网站页脚中有一个带有社交媒体图标的元素。我正在使用 bootstrap col 类来定位元素。当我加载页面时，一个图标和元素边框在我将鼠标悬停在它们上面之前是不可见的。我相信它与一些 col 类有关，因为当我删除它们时，它工作正常。 FireFox 和 edge 好像没有这个问题，只有 chrome。这让我摸不着头脑。

这是我网站的链接http://www.davidsandersdesigns.com/这是我的页脚 html

<!--Footer-->
        <div class='container-fluid'>
            <div class='row'><!--Mobile-->
                <div id='bottom_doubleArrow' class='bottom_doubleArrow col-xs-6 col-sm-5 hidden-md hidden-lg col-xs-offset-5 col-sm-offset-5'></div>
            </div>
            <footer class='row'>
                <div id='footer_logo' class='footer_logo col-xs-12 col-sm-12 col-md-3 col-lg-3 col-md-offset-1'></div>
                <!--Problem Element--><div class='footerIcon_container hidden-xs hidden-sm col-md-3 col-lg-2 col-md-offset-7 col-lg-offset-8'>
                    <a>
                      <div class='mail_icon'></div>
                    </a>
                    <a>
                        <div class='linkedIn_icon'></div>
                    </a>
                    <a>
                        <div class='facebook_icon'></div>
                    </a>
                </div>
                <div id='footer_doubleArrow' class='footer_doubleArrow hidden-xs hidden-sm col-md-1 col-lg-1 col-md-offset-10 col-lg-offset-10'></div><!--Desktop-->
            </footer>
        </div>

这是与该元素相关的 css 类。

 .footerIcon_container {
  top: 20px;
  height: 90px;
  border-left: 1px solid white;
  border-right: 1px solid white; }

/* line 100, C:/Users/Frederick/Documents/Web Editing/Projects/Portfolio   site/build 2000/sass/partials/pages/mainPage/_footer.scss */
.mail_icon {
  display: block;
  position: relative;
  float: left;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../images/email_icon.svg");
  height: 40px;
  width: 55px;
  top: 25px;
  transition: opacity 300ms; }

   /* line 111, C:/Users/Frederick/Documents/Web Editing/Projects/Portfolio site/build 2000/sass/partials/pages/mainPage/_footer.scss */
.linkedIn_icon {
  display: block;
  position: relative;
  float: left;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../images/linkedin_icon.svg");
  height: 40px;
  width: 55px;
  top: 25px;
  transition: opacity 300ms; }

  /* line 122, C:/Users/Frederick/Documents/Web Editing/Projects/Portfolio site/build 2000/sass/partials/pages/mainPage/_footer.scss */
.facebook_icon {
  display: block;
  position: relative;
  float: left;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("../images/facebook_icon.svg");
  height: 40px;
  width: 55px;
  top: 25px;
  transition: opacity 300ms; }

Answer 1

这很奇怪。我在检查器中添加了以下样式，它似乎解决了问题:

.footerIcon_container > a {
    display: block;
}

至于为什么会发生这种情况 - 老实说，我不太确定!

编辑 - 我还注意到 <div> anchor 元素中的 是 float 的，如下所示:

<a href="https://www.facebook.com/sharer/sharer.php?u=www.davidsandersdesigns.com" target="_blank">
    <div class="facebook_icon"></div>
</a>

CSS:

.facebook_icon {
    float: left;
}

当您检查包装时 <a>元素，您会注意到它没有高度(已折叠)。我在包装中添加了一个 clearfix 类 <a>这样:

<a class="clearfix" href="https://www.facebook.com/sharer/sharer.php?u=www.davidsandersdesigns.com" target="_blank">

这恢复了包装元素的高度(我对其他社交图标也做了同样的事情。

我还尝试删除 float: left从内部div完全是，所以将它从这个类以及其他社会类中移除:

.facebook_icon { float :左；

然后您可以添加 float: left到包装 <a>是这样的:

.footerIcon_container > a {
    float: left;
}

编辑 2:

经过进一步检查，我注意到 linkedIn 和邮件图标都在您的 styles.css 文件中应用了以下样式:

.linkedIn_icon {
    display: block;
    position: absolute;
    padding: 0;
    overflow: hidden;
    backface-visibility: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

上面是第 477 行，下面是邮件图标的第 464 行:

.mail_icon {
    display: block;
    position: absolute;
    padding: 0;
    overflow: hidden;
    backface-visibility: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../images/logo1.svg");
    height: 90%;
}

很多这些样式都被覆盖了，但是有一些没有被覆盖，这似乎是其他图标显示的原因......这似乎是其他图标出现的原因，而 facebook 没有.我建议修改 linkedIn 如下，这样它也包括 Facebook:

.linkedIn_icon, .facebook_icon {
    display: block;
    position: absolute;
    padding: 0;
    overflow: hidden;
    backface-visibility: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
} 

同样，这似乎对我有用......