Кросс-браузерная совместимость IE - PullRequest
Новая
       37

Кросс-браузерная совместимость IE

0 голосов
/ 19 октября 2018

В моем последнем вопросе меня попросили включить код.Я не знал, отредактировал ли я это сообщение, если бы кто-нибудь его увидел, поэтому я публикую это ..

Подводя итог моей проблеме ... Я завершил (или я так думал) проектдля школы, чтобы сделать сайт.Я забыл, что он должен быть кросс-браузерным, он работает на всех браузерах, кроме IE, где он разбит на несколько областей.

Я знаю, что могу использовать caniuse.com и отследить, что вызывает несовместимостьна IE и попытаться исправить это, но должен ли я отказаться от тех аспектов веб-сайта, которые не работают на IE?Или есть способ указать в зависимости от браузера, какие стили использовать / не использовать ...

Он плохо работает на странице галереи, где я использовал CSS-сетку для разметки изображений, он должен выглядетьвот так: enter image description here

enter image description here

Второе изображение выглядит так, как в IE.Я думаю, это потому, что IE не поддерживает автоматическое размещение, и я использовал grid-auto-row.Я попытался заменить это явными строками, и изображения остались сложенными друг на друга, так что, возможно, нет.

Это основная проблема, с которой я столкнулся.

html (при использовании только одного изображения, чтобы оно не было слишком повторяющимся, imgContainer повторяется для каждого img с соответствующим src.) 

<div class="Gallery">
    <div class=" imgContainer big"><img src="images/chair.jpg" class="img"> 
  </div>
</div>

css 

.Gallery{
  display:-ms-grid;
  display:grid;
  grid-gap: 5px;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  grid-auto-rows:95px;
  grid-auto-flow: dense;
}  

.horiz{
  -ms-grid-column-span: 2;
  grid-column: span 2;
}
.vert{
  -ms-grid-row-span: 2;
  grid-row: span 2;
}
.big{
  -ms-grid-column-span:2;
  grid-column:span 2;
  -ms-grid-row-span: 2;
  grid-row: span 2;
}

.imgContainer {
  width: 100%;
  height: 100%;
}
.backgroundCover {
  background-size: cover;
  background-position: center center;
}
.imgContainer .backgroundCover .img {
  opacity: 0;
}
.img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

    t{
      -ms-grid-row-span: 2;
      grid-row: span 2;
    }
    .big{
      -ms-grid-column-span:2;
      grid-column:span 2;
      -ms-grid-row-span: 2;
      grid-row: span 2;
    }
    .imgContainer {
      width: 100%;
      height: 100%;
    }
    .backgroundCover {
      background-size: cover;
      background-position: center center;
    }
    .imgContainer .backgroundCover .img {
      opacity: 0;
    }
    .img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }

javascript, чтобы попытаться приспособить объект к размеру, например, изменив его на фоновое изображение и используя обложку ... на самом деле он не выглядит как работающий ..

это беспорядок, я знаю ... я новичок и нуждаюсь в руководстве.

function hasClass(el, className) {
    return el.classList ? el.classList.contains(className) : new RegExp('\\b' + className + '\\b').test(el.className);
}

/**
* helper function to add a class to an element
*/

function addClass(el, className) {
    if (el.classList) {
        el.classList.add(className);
    } else if (!hasClass(el, className)) {
        el.className += ' ' + className;
    }
}

var imgContainers;
var len;

if (!Modernizr.objectfit) {
    imgContainers = document.querySelectorAll('.imgContainer');
    len = imgContainers.length;

    for (var i=0; i<len; i++) {
        var $container = imgContainers[i],
                imgUrl = $container.querySelector('img').getAttribute('src');
        if (imgUrl) {
            $container.style.backgroundImage = 'url(' + imgUrl + ')';
            addClass($container, 'backgroundCover');
        }
    }
}
...