Question

最后一个问题是要求我包含代码。我不知道是否有人可以看到我是否刚刚编辑了该帖子，所以我正在发布此帖子。

总结我的问题.. 我已经完成了一个学校的项目，或者做了一个网站。我忘了它必须与跨浏览器兼容，它可以在除IE以外的所有浏览器上使用，IE在某些方面已被破坏。

我知道我可以使用caniuse.com并找出导致IE不兼容的原因并尝试对其进行修复，但是我是否必须放弃网站无法在IE上运行的内容？还是有一种方法可以根据浏览器指定要使用/不使用的样式...

在图库页面上，它被严重破坏了，在这里我使用CSS网格对图像进行布局，应该看起来像这样：

第二张图片是IE上的外观。我认为这是因为IE不支持自动放置，而是使用了网格自动行。我尝试用显式的行替换它，并且图像保持堆叠在一起，所以也许不是。

这是我遇到的主要问题。

html（仅使用一张图像就不会太重复，imgContainer会针对每个带有相应src的img重复此操作。）

<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');
        }
    }
}

跨浏览器兼容性IE

0 个答案: