118.浏览器支持和修复Safari浏览器的Flexbox漏洞

这篇具有很好参考价值的文章主要介绍了118.浏览器支持和修复Safari浏览器的Flexbox漏洞。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在我们之前的文章中,我们介绍了测试的步骤
118.浏览器支持和修复Safari浏览器的Flexbox漏洞,HTML5+CSS3,HTML5+CSS3

虽然现在大部分新版本的浏览器都能支持99%的CSS属性,但是不排除的是仍然有一些用户使用老的IE浏览器或者版本较低的浏览器去浏览我们的网页,这样我们的网站可能无法按照我们的预期工作;

● 我们可以使用工具去检测浏览器是否可以支持某些CSS属性
118.浏览器支持和修复Safari浏览器的Flexbox漏洞,HTML5+CSS3,HTML5+CSS3

● 我们只需要输入相关的CSS属性就能给我们结果
118.浏览器支持和修复Safari浏览器的Flexbox漏洞,HTML5+CSS3,HTML5+CSS3

● 例如,现在我们在导航添加一个很新的CSS属性,这个会让背景变得模糊

background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);

118.浏览器支持和修复Safari浏览器的Flexbox漏洞,HTML5+CSS3,HTML5+CSS3

● 但是例如老版本的safari浏览器不支持,我们需要加另外的参数

   -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);

● 这里我们没有苹果设备,无法测试,但是理论上是没问题的

我们可以看到有些CSS属性,需要添加供应商参数才能使其生效

118.浏览器支持和修复Safari浏览器的Flexbox漏洞,HTML5+CSS3,HTML5+CSS3

● 除此之外,我们可以添加一段JS来实现兼容的效果

function checkFlexGap() {
  var flex = document.createElement("div");
  flex.style.display = "flex";
  flex.style.flexDirection = "column";
  flex.style.rowGap = "1px";

  flex.appendChild(document.createElement("div"));
  flex.appendChild(document.createElement("div"));

  document.body.appendChild(flex);
  var isSupported = flex.scrollHeight === 1;
  flex.parentNode.removeChild(flex);
  console.log(isSupported);

  if (!isSupported) document.body.classList.add("no-flexbox-gap");
}
checkFlexGap();

这是一个 JavaScript 函数,用于检测浏览器是否支持 flexbox 的 row-gap 和 column-gap 属性。该函数创建了一个 div 元素,并将其样式设置为 flex 布局,然后将两个 div 元素添加到该元素中。接着,将该元素添加到文档中,并检查其 scrollHeight 是否为 1。如果 scrollHeight 为 1,则表示浏览器支持 flexbox 的 row-gap 和 column-gap 属性,否则将在文档的 body 元素上添加一个类名为 "no-flexbox-gap",用于标识浏览器不支持该属性。最后,该函数会将创建的 div 元素从文档中移除。

● 还需要再媒体查询中添加一段CSS代码

.no-flexbox-gap .main-nav-list li:not(:last-child) {
  margin-right: 4.8rem;
}

.no-flexbox-gap .list-item:not(:last-child) {
  margin-bottom: 1.6rem;
}

.no-flexbox-gap .list-icon:not(:last-child) {
  margin-right: 1.6rem;
}

.no-flexbox-gap .delivered-faces {
  margin-right: 1.6rem;
}

.no-flexbox-gap .meal-attribute:not(:last-child) {
  margin-bottom: 2rem;
}

.no-flexbox-gap .meal-icon {
  margin-right: 1.6rem;
}

.no-flexbox-gap .footer-row div:not(:last-child) {
  margin-right: 6.4rem;
}

.no-flexbox-gap .social-links li:not(:last-child) {
  margin-right: 2.4rem;
}

.no-flexbox-gap .footer-nav li:not(:last-child) {
  margin-bottom: 2.4rem;
}

@media (max-width: 75em) {
  .no-flexbox-gap .main-nav-list li:not(:last-child) {
    margin-right: 3.2rem;
  }
}

@media (max-width: 59em) {
  .no-flexbox-gap .main-nav-list li:not(:last-child) {
    margin-right: 0;
    margin-bottom: 4.8rem;
  }
}

这段 CSS 代码是用来解决 flexbox 的 row-gap 和 column-gap 属性在某些浏览器中不被支持的问题。它使用了一个类名 .no-flexbox-gap,然后为这个类名下的一些元素设置了间距,以达到类似 row-gap 和 column-gap 的效果。其中使用了 margin-right 和 margin-bottom 属性来分别控制元素之间的水平和垂直间距。另外,它还使用了媒体查询来在不同的屏幕尺寸下改变间距的大小。文章来源地址https://www.toymoban.com/news/detail-531850.html

到了这里,关于118.浏览器支持和修复Safari浏览器的Flexbox漏洞的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [selenium]关于使用selenium启动safari浏览器

    selenium支持多系统多浏览器,当我们在操作chrome或者firefox浏览器时,我们需要安装相应的驱动.这里我们就来说说如何操作safari浏览器吧. 其实要操作safari浏览器,也需要下载对应的驱动,但是safari浏览器已经帮助我们安装好了,所以我们只需要做一些配置就好了 打开safari浏览器 点击

    2024年02月04日
    浏览(61)
  • Mac系统Safari浏览器快捷键大全

    Command+L:快速进入地址栏,输入网址进行访问。 Command+T:新建一个选项卡。 Command+Shift+T:恢复最近关闭的选项卡。 Command+数字:选中相应的选项卡。 Command+左箭头/右箭头:在两个选项卡之间切换。 Command+上箭头:返回到当前页面的上一级页面。 Command+下箭头:进入当前页面

    2024年02月12日
    浏览(62)
  • 苹果safari浏览器播放不了video标签视频

    今天遇到了个神奇的问题,视频文件在pc端和安卓手机上播放都没问题,但是在ios上就是播放不了,大概代码如下: 前端代码: 后端代码: PC端没任何问题: IOS端播放不了: 在网上搜索了很多办法,有加前端参数配置的: 有改后端多次发送请求,分段获取数据流的: 经过

    2024年02月16日
    浏览(85)
  • 如果在 Mac 上的 Safari 浏览器中无法打开网站

    使用网络管理员提供的信息更改代理设置。个人建议DNS解析,设置多个例如114.114.114.114   8.8.8.8   8.8.4.4 如果打不开网站,请尝试这些建议。 在 Mac 上的 Safari 浏览器 App   中,检查页面无法打开时出现的信息。 这可能会建议解决问题的方法或包括解决问题时需要的信息。

    2024年02月07日
    浏览(74)
  • safari浏览器连调手机控制台闪退

    仅仅对mac电脑

    2024年02月13日
    浏览(62)
  • mac的safari浏览器如何开启开发者模式

    在windows中或者其他浏览器中,大家习惯了统一按F12开启开发者模式。但是在safari中按F12没有反应,那么应该怎么开启开发者模式呢?看步骤: 1、打开safari浏览器后,点击左上角的“Safari浏览器” → “偏好设置”: 2、选择上面的“高级”选项,勾选最下面的“在菜单栏中显

    2024年02月12日
    浏览(62)
  • 【Safari浏览器H5分享链接的标题,描述,头像的修改】

    在入口文件html中: 以上修改,分享到QQ中头像失效 解决办法:在入口文件html中添加

    2024年02月16日
    浏览(48)
  • 如何清除浏览器的 DNS 缓存 (Chrome, Firefox, Safari)

    如何清除浏览器的 DNS 缓存 (Chrome, Firefox, Safari) Chrome Chromium Edge Firefox Safari clear DNS Cache, flush DNS cache 请访问原文链接:https://sysin.org/blog/clear-browser-dns-cache/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org 天下只剩三种(主流)浏览器: Apple Safari Mozilla Firefox

    2024年02月11日
    浏览(49)
  • JS一些常用判断(包括判断是否是苹果(ios)/安卓(Android)、是否是Safari浏览器、检测浏览器语言等等)

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 提示:这里可以添加本文要记录的大概内容: 参考链接 JS判断客户端是否是iOS或者Android:http://caibaojian.com/browser-ios-or-android.html

    2024年02月04日
    浏览(86)
  • Chrome/Safari 浏览器怎么查看网络请求的 http 协议版本

    通过 Chrome 或者 Safari 浏览器的开发者工具查看网络请求后,发现只能看到 scheme 是 https,但是看不到 http 协议是 1.1 还是 2,亦或者是 http3 查看 http 请求 http 协议版本的方法是:鼠标右键表头中的任何一项,随后勾选上「Protocol」 随后可以看到新增了一列 Protocol,显示了 htt

    2024年02月15日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包