javascript - Swiper 使用 Edge 和 Safari 在网格内溢出
问题描述
这个 Swiper Fiddle适用于 Firefox 和 Chrome。显然,我的网格布局使用 Edge 和 Safari 打破了这一点(没有display: grid
这个小提琴将适用于 Safari 和 Edge)。但是,我不想用 flexbox 替换网格。
使用时如何在 Edge 和 Safari 中使用它display: grid
?
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;
推荐阅读
- python-3.x - 如何修复 404 HTTP 状态代码未处理或在 scrapy 中不允许?
- asp.net - 如果使用 ASP.NET 和 RedisSessionStateProvider,会话何时序列化和反序列化?
- javascript - 尽管没有删除对象引用,`delete this` 仍返回 true
- nlp - 为什么将“正”和“负”参数传递给 gensim 的 most_similar 函数返回的结果与向量数学结果不同?
- omnet++ - 在网络文件中访问模块类型的参数
- docker - 让 GitLab 在 Nginx 反向代理后面运行
- php - 客户端被服务器配置 htaccess 拒绝
- excel - VBA 从 ProcessID 创建 IE 对象
- java - 可以自动应用建议的修复吗?
- google-cloud-platform - 如何输入一次谷歌云凭据而不再被询问?