This Swiper Fiddle与Firefox和Chrome兼容。显然，我的网格布局使用Edge和Safari打破了这一点（如果没有display: grid，该小提琴将适用于Safari和Edge）。但是，我不想用flexbox替换网格。
使用display: grid时如何在Edge和Safari中使用它？
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});body {
background: grey;
}
.grid {
display: grid;
grid-template-columns: 8fr 4fr;
grid-gap: 2rem;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
min-height: 80px;
text-align: center;
background: red;
display: flex;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
</head>
<body>
<!-- Swiper -->
<div class="grid">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<aside>
<div>
<p>
Vivamus placerat lacus vel vehicula scelerisque, dui enim adipiscing lacus sit amet sagittis, libero enim vitae mi. In neque magna posuere, euismod ac tincidunt tempor est. Ut suscipit nisi eu purus. Proin ut pede mauris eget ipsum. Integer vel quam nunc commodo consequat. Integer ac eros eu tellus dignissim viverra. Maecenas erat aliquam erat volutpat. Ut venenatis ipsum quis turpis. Integer cursus scelerisque lorem. Sed nec mauris id quam blandit consequat. Cras nibh mi hendrerit vitae, dapibus et aliquam et magna. Nulla vitae elit. Mauris consectetuer odio vitae augue.
</p>
</div>
</aside>
</div>
</body>
</html>这在使用弹性单位（fr）时似乎是一个问题，并且Safari无法正确计算宽度。解决此问题的方法是使用minmax()定义网格列，例如grid-template-columns: minmax(0, 8fr) 4fr;