在我们之前的文章中,我们介绍了测试的步骤
虽然现在大部分新版本的浏览器都能支持99%的CSS属性,但是不排除的是仍然有一些用户使用老的IE浏览器或者版本较低的浏览器去浏览我们的网页,这样我们的网站可能无法按照我们的预期工作;
● 我们可以使用工具去检测浏览器是否可以支持某些CSS属性
● 我们只需要输入相关的CSS属性就能给我们结果
● 例如,现在我们在导航添加一个很新的CSS属性,这个会让背景变得模糊
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
● 但是例如老版本的safari浏览器不支持,我们需要加另外的参数
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
● 这里我们没有苹果设备,无法测试,但是理论上是没问题的
我们可以看到有些CSS属性,需要添加供应商参数才能使其生效
● 除此之外,我们可以添加一段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代码文章来源:https://www.toymoban.com/news/detail-531850.html
.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模板网!