个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
This Swiper Fiddle适用于 Firefox 和 Chrome。显然我的网格布局与 Edge 和 Safari 打破了这一点(没有 display: grid 这个 fiddle 将适用于 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;
关于javascript - 使用 Edge 和 Safari 浏览器在网格内溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58725174/
24
4
0
Safari 和 Mobile Safari 在组合边框半径、填充和边框时似乎有问题。在 Chrome 和 Firefox 中运行良好。 CSS: img { width: 200px;
每次我在打开 Safari 开发工具的情况下加载页面(无论是哪个选项卡)时，都会触发一些断点，并且我会被重定向到“源代码”选项卡，并显示消息“调试器已暂停”。问题是我没有设置任何断点，至少是有意的，这
我有一个复合 div(它有 translate3d)和一个 opacity过渡: #bad { background-color: red; -webkit-transition: o
我想为我正在制作的工具添加一个类似的功能。我对它在代码方面的工作方式很感兴趣。我希望能够获得一个 html 页面并排除除文章之外的所有内容。 最佳答案 Readability 项目对 chrome 和
我们有一个重定向到另一台服务器的 API 端点。它是通过 XHR 调用的，似乎在大多数浏览器中都能正常工作，除了 Safari(特别是在 iOS 上)。 我在控制台中遇到的错误是:跨源重定向被跨源资源
如何在 Safari 中为网页添加 IE 等页面转换效果？ 最佳答案 你可以看看这个例子:http://sachiniscool.blogspot.com/2006/01/implementing-p
所以我用拇指和周围的白色边框制作了这个圆圈。一切都在每个浏览器中都能找到，除了 safari，它不会按应有的方式呈现白色边框。那我怎样才能让它工作呢？ 示例 http://jsfiddle.net/v
我找遍了这个问题的解决方案，但似乎没有任何效果，如果可以避免的话，我真的不想使用 hack。 当我将 line-height 设置为垂直居中时，我的导航栏在任何地方都居中，但在 safari 中，它的
在输入字段中输入时，safari 会创建一个基于下拉列表的联系人。我不知道如何隐藏这个下拉菜单。我可以隐藏联系人按钮。 我正在运行 Safari 版本 11.0.1 重现 fiddle : https
我需要一个苹果脚本来全屏打开 safari 并隐藏小牛上的工具栏。 这听起来很容易，但事实并非如此! 我需要打开 safari，然后以全屏模式打开谷歌，然后隐藏工具栏。 这将是以下示例的等效项，但对于
嗨， friend 们，我开发了一个 safari 扩展并且也能够构建它。 但是当我尝试安装它时，会出现以下错误: “Safari 无法安装此扩展程序。安装此扩展程序时出错” 我有一个有效的 Safa
我想将使用的扩展版本报告给服务。 有没有办法从扩展中读取扩展版本号？ 最佳答案 您可以使用 displayVersion 访问该版本SafariExtension 的属性(property)类(cla
我有一个禁用模式的 Safari 浏览器扩展。我想做的是在用户进入禁用模式时以编程方式更改工具栏图标。 是否有一个 API 可以让我实现这一点，如果有，它是什么？ 最佳答案 您的扩展程序拥有的任何工具
Safari 有一项“功能”，可以在您输入网址时预加载页面。 现在对于大多数用户来说，这确实是一项功能，可以加快页面加载速度。但是对于 Web 开发人员来说，它可能会带来麻烦 - 特别是当它自动加载您
我们有一个正在开发中的 PHP Web 应用程序，它不应该被公众访问(但)，但我们不想实现自定义解决方案来防止这种情况发生，因此我们求助于 HTTP 基本身份验证，它通常工作正常但有是 iPhone
我正在尝试查看 Safari 本地存储中保存的单个值的全部内容(它是一个长 JSON 对象)。当我查看键/值对时，该值对于屏幕来说太长了，复制该行只会复制该值的可见部分。有没有办法看到整条线？ 最佳答
出于开发目的，我需要在我的计算机上的 Safari(Windows 上)中禁用同源策略。 在 Chrome 中，这可以通过使用标志 --disable-web-security 启动来完成。 Safa
我正在开发网站并创建应用程序。我想知道如何通过 safari 等网络浏览器检查元素。 在普通的 Chrome、Firefox、Explorer 或任何其他浏览器中，我们将右键单击鼠标按钮或按功能键 F
我有兴趣针对 Safari 浏览器进行一些开发，但我不确定它是否是开源项目？我知道 webkit 是开源的，但这并不意味着浏览器是开源的。 我已经给苹果发了电子邮件，但他们的回复不是很及时，所以我想知
我有一个正确的/etc/hosts 文件，其中包含以下内容: 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 l
我是一名优秀的程序员,十分优秀！