如何通过处理JavaScript和混合混合模式来修复跨浏览器错误？

时间：2018-11-18 10:48:52

标签： jquery html css cross-browser mix-blend-mode

过去几天，我一直在不停地建立网站，只是遇到了我最糟糕的噩梦。它仅适用于Chrome。它不适用于IE，也不适用于FireFox。

这可能是由于Java糟糕所致，但是在IE的情况下，似乎有很多错误。

（注意：打开页面时可能必须向下滚动。要查看混合混合模式，您需要向下滚动很多。现在可能还会出现对齐问题，但这些并非特定于浏览器）

这里是问题：

在Mozilla中 导航按钮不会变为纯色。也许混合模式在Mozilla中的工作方式有所不同？ enter image description here

在chrome中，它看起来像这样： enter image description here

这通常也会在Chrome中发生，但我在按钮下方但页面内容上方放置了一个对象，这样它就不会通过混合模式运行页面内容。

在IE中 很多东西坏了，我不太确定连接是什么。 其他浏览器上存在的所有深色块都不会在此处显示。 “混合混合模式：差异”似乎不起作用。 enter image description here

任何想法这些东西可能会出什么问题吗？任何帮助都将是非常有用的，我正尝试在周一启动该站点，但是由于这些东西，它的外观开始变差。

谢谢大家。

// Page Scroll
jQuery(document).ready(function($) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') ||
      location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 32
        }, 1000);
        return false;
      }
    }
  });
});

// Fixed Nav
jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollTop = 142;
    if ($(window).scrollTop() >= scrollTop) {
      $('nav').css({
        position: 'fixed',
        top: '0'
      });
    }
    if ($(window).scrollTop() < scrollTop) {
      $('nav').removeAttr('style');
    }
  })

  // Active Nav Link
  $('nav ul li a').click(function() {
    $('nav ul li a').removeClass('active');
    $(this).addClass('active');
  });
})



var stickyHeaders = (function() {

  var $window = $(window),
    $stickies;
  var load = function(stickies) {

    if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {

      $stickies = stickies.each(function() {
        var $thisSticky = $(this).wrap('<div class="followWrap" />');

        $thisSticky
          .data('originalPosition', $thisSticky.offset().top)
          .data('originalHeight', $thisSticky.outerHeight())
          .parent()
          .height($thisSticky.outerHeight());
      });

      $window.off("scroll.stickies").on("scroll.stickies", function() {
        _whenScrolling();
      });
    }
  };

  var _whenScrolling = function() {

    $stickies.each(function(i) {

      var $thisSticky = $(this),
        $stickyPosition = $thisSticky.data('originalPosition');

      if ($stickyPosition <= $window.scrollTop()) {

        var $nextSticky = $stickies.eq(i + 1),
          $nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight');

        $thisSticky.addClass("fixed");

        if ($nextSticky.length > 100 && $thisSticky.offset().top >= $nextStickyPosition) {

          $thisSticky.addClass("absolute").css("top", $nextStickyPosition);
        }

      } else {

        var $prevSticky = $stickies.eq(i - 1);

        $thisSticky.removeClass("fixed");

        if ($prevSticky.length > 0 && $window.scrollTop() <= $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight')) {

          $prevSticky.removeClass("absolute").removeAttr("style");
        }
      }
    });
  };

  return {
    load: load
  };
})();

$(function() {
  stickyHeaders.load($(".followMeBar"));
});



$(function() {
  $('#main-content').css({
    'top': (($(window).top()) - 361) + 'px'
  });

  $(window).bind('resize', function() {
    $('#main-content').css({
      'height': (($(window).top()) - 361) + 'px'
    });
    alert('resized');
  });
});
body {
  background-color: #ccc;
}

.body-inner {
  width: 50%;
  background-color: blue;
  z-index: 0;
  height: 1000vw;
  margin: 0;
  float: right;
}

a {
  color: inherit;
}

body2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 500px;
  background-color: rgba(210, 210, 210);
  filter: alpha(opacity=.18);
  -moz-opacity: 0.18;
  opacity: 0.18;
}

.header {
  width: 100%;
  background-color: rgba(20, 20, 20);
  position: absolute;
  float: left;
  z-index: 0;
  isolation: isolate;
}

---------------------------------- .followMeBar {
  padding: 10px 20px;
  position: absolute;
  z-index: 2;
}

.followMeBar.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  mix-blend-mode: difference;
  margin: 0;
  float: right;
  z-index: 2;
}

.colorgram {
  mix-blend-mode: difference;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  position: relative;
  z-index: 2;
}

.followMeBar.fixed.absolute {
  position: absolute;
  z-index: 0;
}

.followMeBar.color-container.fixed.absolute {
  position: absolute;
  z-index: 0;
}

.box {
  width: 58%;
  height: 70px;
  transform: skew(30deg);
  padding: 0;
  margin: 0;
  margin-left: -1.5%;
  border: 0;
  background: rgba(20, 20, 20);
  position: fixed;
  isolation: isolate;
  mix-blend-mode: normal;
}

.box2 {
  width: 58%;
  height: 70px;
  transform: skew(30deg);
  padding: 0;
  margin: 0;
  margin-top: 0px;
  margin-left: -1.5%;
  border: 0;
  background: rgba(20, 20, 20);
  isolation: isolate;
  mix-blend-mode: normal;
  color: white;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

.text2 {
  padding-top: 5px;
  padding-left: 7%;
  color: #FFF;
  z-index: 44;
  transform: skew(-30deg);
}

.black {
  width: 15%;
  height: 70px;
  transform: skew(30deg);
  background-color: #333333;
  z-index: 1;
  position: relative;
  isolation: isolate;
  float: right;
  right: -1.5%;
}

.colorgram2 {
  width: 15%;
  height: 70px;
  mix-blend-mode: canvas;
  float: right;
  overflow: hidden;
  margin: 0;
  position: relative;
  right: -1.5%;
  z-index: 1;
  transform: skew(30deg);
}

.colorcontainer2 {
  background-color: black;
  width: 100%;
  height: 100%;
}

h3 {
  z-index: 11111111;
  float: right;
  margin-top: 0;
  padding-top: 22px;
  margin-bottom: 0;
  margin-left: -10000px;
  right: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

-------------------------------
/* Create three equal columns that floats next to each other */

.column1 {
  float: left;
  width: 33;
  padding: 10px;
  height: 300px;
  /* Should be removed. Only for demonstration */
}

.column2 {
  float: left;
  width: 18%;
  padding: 10px;
  height: 300px;
  /* Should be removed. Only for demonstration */
}

.column3 {
  float: left;
  width: 18%;
  padding: 10px;
  height: 300px;
  /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.resume {
  margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box"></div>
<div class="header">
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</div>
<div class="followMeBar">
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="#section3">
  <h3 style="margin-right:4%;">Contact</h3>
</a>
<a href="#section2">
  <h3 style="margin-right:19%;">Portfolio</h3>
</a>
<a href="#section1">
  <h3 style="margin-right:34%;">Resume</h3>
</a>
<div class="followMeBar">


  <div class="color-container">

    <a href="#section3">
      <div class="black">
        <div class="colorgram" style="background:#0000FF;"></div>
      </div>
    </a>

    <a href="#section2">
      <div class="black">
        <div class="colorgram" style="background:#00FF00;"></div>
      </div>
    </a>

    <a href="#section1">
      <div class="black">
        <div class="colorgram" style="background:#FF0000;"></div>
      </div>
    </a>

  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">
  <div class="color-container">

    <a href="#section3">
      <div class="colorgram2" style="background:#FF00FF;"></div>
    </a>

    <a href="#section2">
      <div class="colorgram2" style="background:#FFFF00;"></div>
    </a>

    <a href="#section1">
      <div class="colorgram2" style="background:#00FFFF;"></div>
    </a>

  </div>
</div>


<div class="box2">
  <div class="text2">
    <h2>Resume</h2>
  </div>
</div>
<section id="section1">

  <div class="resume" </div>
    <h1>Education</h1>
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</section>
<div class="followMeBar">
  <div class="color-container">
    <a href="#section3">
      <div class="colorgram2" style="background:#FFFF00;"></div>
    </a>
    <a href="#section2">
      <div class="colorgram2" style="background:#00FFFF;"></div>
    </a>
    <a href="#section1">
      <div class="colorgram2" style="background:#FF00FF;"></div>
    </a>
  </div>
</div>


<div class="box2">
  <div class="text2">
    <h2>Portfolio</h2>
  </div>
</div>

<section id="section2">
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</section>
<div class="followMeBar">
  <div class="color-container">
    <a href="#section3">
      <div class="colorgram2" style="background:#FF00FF;"></div>
    </a>
    <a href="#section2">
      <div class="colorgram2" style="background:#FFFF00;"></div>
    </a>
    <a href="#section1">
      <div class="colorgram2" style="background:#00FFFF;"></div>
    </a>
  </div>
</div>


<div class="box2">
  <div class="text2">
    <h2>Contact</h2>
  </div>
</div>
<section id="section3">
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</section>

0 个答案:

没有答案
相关问题
最新问题