标语在FF中完美显示，而不在Chrome中完美显示

Question

我使用HTML，CSS + JQuery为客户制作了横幅。它所在的网站是一个PHP Laravel项目，（该网站的）最初的开发人员未正确实施横幅，客户要求我在其网站上的独立页面上实施。

指向该链接的链接转到advert.blade.php文件（来自index.blade.php）-最初，我将项目中的CSS，HTML和JS放到了advert.blade.php中-这项工作绝对正常在FF中，而不在Chrome中。奇怪的是，当我检查页面时，它似乎确实可以正常工作。我认为一个简单的解决方法是将原始项目文件夹添加到公用文件夹中，然后直接链接到banner.html-这样可以达到相同的结果，在FF中效果很好，但在Chrome中效果不佳，只是这次Chromes控制台记录了两个错误-客户端拒绝访问CSS + JS文件。

这在我的Chrome + FF本地版本中均能完美运行。我在这篇文章的底部提供了两个实时版本的链接。

相关代码：

var tap = ('ontouchstart' in document.documentElement);

$adSlideOne = $('#ad-banner-slide-1');
$adSlideTwo = $('#ad-banner-slide-2');
$adCtaOne = $('#ad-banner-cta-1');
$adCtaTwo = $('#ad-banner-cta-2');

var adShowSlide = () => {
  var adOpt = Math.floor(Math.random() * 2);

  return adOpt;
}

var adDisplay = adShowSlide();

if (adDisplay > 0) {
  $adSlideOne.show();
  $adCtaOne.hide();
} else {
  $adSlideTwo.show();
  $adCtaTwo.hide();
}

if (!tap) {
  $adSlideOne.on('mouseenter', function() {
    $adCtaOne.fadeIn(800);
  }).on('mouseleave', function() {
    $adCtaOne.fadeOut();
  })

  $adSlideTwo.on('mouseenter', function() {
    $adCtaTwo.fadeIn(800);
  }).on('mouseleave', function() {
    $adCtaTwo.fadeOut();
  })
}

.ad-banner-container {
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Quicksand', sans-serif;
}

.ad-banner {
  height: 170px;
  width: 728px;
  display: flex;
  flex-direction: column;
  margin: 1rem auto;
  position: relative;
}

.ad-banner .ad-banner-slide {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.ad-banner .ad-banner-slide .ad-banner-slide-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem;
  font-size: 1.2rem;
}

.ad-banner .ad-banner-slide .ad-banner-cta h1,
.ad-banner .ad-banner-slide .ad-banner-cta h2 {
  font-family: 'Josefin Sans', sans-serif;
}

.ad-banner .ad-banner-slide .ad-banner-slide-content img {
    max-height: 80px;
    width: auto;
}

.ad-banner .ad-banner-slide .ad-banner-cta {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.65);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ad-banner #ad-banner-slide-1 {
  background-image: url('http://www.handymans-hardware.co.uk/ad-banner/includes/imgs/handy-bg.jpeg');
  color: #fff;
  font-weight: bold;
  display: none;
}

.ad-banner #ad-banner-slide-1 p {
  padding: .5rem;
  text-align: right;

}
.ad-banner #ad-banner-slide-2 {
  background-image: url('http://www.handymans-hardware.co.uk/ad-banner/includes/imgs/tools-bg.jpg');
  color: #fff;
  font-weight: bold;

  display: none;
}

.ad-banner #ad-banner-slide-2 .ad-banner-slide-content {
  justify-content: space-around;
}

.ad-banner #ad-banner-slide-2 #ad-banner-cta-2 h2 {
  text-align: center;
}

/* Desktop || Mobile */
.ad-banner-mobile {
  display: none;
}

@media only screen and (max-width: 800px) {
  .ad-banner-desktop {
    display: none;
  }

  .ad-banner-mobile {
    display: block;
  }

  .ad-banner .ad-banner-slide .ad-banner-slide-content {
    flex-direction: column;
    justify-content: space-around;
  }

  .ad-banner {
    width: 100%;
    height: 400px;
    align-items: center;
  }

  .ad-banner img {
    max-width: 90%;
    height: auto;
  }
}

/*
  BTNS CSS Library by Daniel Winning
*/

/* Font face */
/* Borders, sizing, transition and effects */
/* Button colours */
.btns-button {
  text-decoration: none;
  cursor: pointer;
  border: none;
  background-color: #cccccc;
  font-family: "Open Sans", sans-serif;
  color: #fff;
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  font-size: 1.25em;
  transition: 0.5s; }

/* Standard buttons */
.btns-red {
  background-color: #eb4f40;
  border: 1px solid #eb4f40; }

.btns-blue {
  background-color: #407beb;
  border: 1px solid #407beb; }

.btns-green {
  background-color: #6ebe6e;
  border: 1px solid #6ebe6e; }

.btns-orange {
  background-color: #ec7a15;
  border: 1px solid #ec7a15; }

.btns-purple {
  background-color: #a05ebb;
  border: 1px solid #a05ebb; }

/* Standard Hovers */
.btns-red:hover {
  background-color: rgba(235, 79, 64, 0.75); }

.btns-blue:hover {
  background-color: rgba(64, 123, 235, 0.75); }

.btns-green:hover {
  background-color: rgba(110, 190, 110, 0.75); }

.btns-orange:hover {
  background-color: rgba(236, 122, 21, 0.75); }

.btns-purple:hover {
  background-color: rgba(160, 94, 187, 0.75); }

/* Single Borders */
/* Coloured bottom border */
.btns-red-bottom, .btns-blue-bottom, .btns-green-bottom, .btns-orange-bottom, .btns-purple-bottom {
  border-bottom: 4px solid; }

/* Coloured left border */
.btns-red-left, .btns-blue-left, .btns-green-left, .btns-orange-left, .btns-purple-left {
  border-left: 4px solid; }

.btns-red-bottom, .btns-red-left {
  border-color: #eb4f40; }

.btns-blue-bottom, .btns-blue-left {
  border-color: #407beb; }

.btns-green-bottom, .btns-green-left {
  border-color: #6ebe6e; }

.btns-orange-bottom, .btns-orange-left {
  border-color: #ec7a15; }

.btns-purple-bottom, .btns-purple-left {
  border-color: #a05ebb; }

/* Default hover effect */
.btns-red-bottom:hover, .btns-blue-bottom:hover, .btns-green-bottom:hover, .btns-purple-bottom:hover, .btns-orange-bottom:hover,
.btns-red-left:hover, .btns-blue-left:hover, .btns-green-left:hover, .btns-purple-left:hover, .btns-orange-left:hover {
  background-color: rgba(204, 204, 204, 0.75); }

/* Alternate hover effects - coloured hover */
.btns-alt-red:hover {
  background-color: #eb4f40; }

.btns-alt-blue:hover {
  background-color: #407beb; }

.btns-alt-green:hover {
  background-color: #6ebe6e; }

.btns-alt-orange:hover {
  background-color: #ec7a15; }

.btns-alt-purple:hover {
  background-color: #a05ebb; }

/* Rounded buttons */
.btns-round {
  border-radius: 8px; }

/* Shadowed buttons */
.btns-shadow {
  box-shadow: 3px 8px 8px 0px rgba(0, 0, 0, 0.4); }

/*# sourceMappingURL=btns.css.map */

  <div class='ad-banner-container'>
    <div class='ad-banner'>
      <div class='ad-banner-slide' id='ad-banner-slide-1'>
        <div class='ad-banner-slide-content'>
          <img src='http://www.handymans-hardware.co.uk/ad-banner/includes/imgs/logo-alt.png'>
          <p>Whatever the job, we've got just the tools you need!</p>
          <a class='btns-button btns-red ad-banner-mobile'>Sign-up Now</a>
        </div>
        <div class='ad-banner-cta' id='ad-banner-cta-1'>
          <h1>Check out our brand new online store!</h1>
          <a class='btns-button btns-red' href='#'>Sign-up Now</a>
        </div>
      </div>
      <div class='ad-banner-slide' id='ad-banner-slide-2'>
        <div class='ad-banner-slide-content'>
          <img class='ad-banner-mobile' src='http://www.handymans-hardware.co.uk/ad-banner/includes/imgs/logo-alt.png'>
          <p>A tool for every job!</p>
          <img class='ad-banner-desktop' src='http://www.handymans-hardware.co.uk/ad-banner/includes/imgs/logo-alt.png'>
          <a class='btns-button btns-red ad-banner-mobile'>Shop Now!</a>
        </div>
        <div class='ad-banner-cta' id='ad-banner-cta-2'>
          <h2>Discover your next new tool on our new online store...</h2>
          <a class='btns-button btns-red' href='#'>Shop Now!</a>
        </div>
      </div>
    </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我对冗长的帖子表示歉意，希望我对所要求的内容很清楚，并提供了充分的解释。我的问题是，为什么这两个实时版本在Google Chrome中都无法使用？

经过编辑后添加：为了使本文中的示例正常运行，上面代码中的链接已更新。

PHP Blade Banner Project