为什么 css "all: unset" 在 MacOS 的 Safari 浏览器中工作得很奇怪?

2023-11-26

所以基本上我做了这种情况,父级有cssall: unset.

然后我注意到当我使用 Safari(版本12.1.1 (14607.2.6.1.1))它的所有子颜色只能受到以下影响*块,甚至不是内联或!important.

但只有color行为方式就是这样,正如你所看到的background-color正在使用自己的财产。

但它在 Chrome 中运行良好,是 safari 中的故障还是我做错了什么?我该如何在 Safari 中修复它?

* {
  color: red;                   /* Text color is using this one */
  background-color: pink;
}

.Parent {
  all: unset;
}

.Child {
  color: blue;
  background-color: yellow;     /* Background color is using this one */
}
<div class="Parent">
  <div class="Child">Some Text</div>
</div>
  • Expected result(Chrome) enter image description here

  • Wrong result(Safari Version 12.1.1 (14607.2.6.1.1)) enter image description here


Safari 使用特殊属性-webkit-text-fill-color。如果你使用它,颜色就会起作用:

* {
  color: red;                   /* Text color is using this one */
  background-color: pink;
  -webkit-text-fill-color: red;
}

.Parent {
  all: unset;
}

.Child {
  color: blue;
  background-color: yellow;     /* Background color is using this one */
  -webkit-text-fill-color: blue;
}
<div class="Parent">
  <div class="Child">Some Text</div>
</div>

@丹·法布里奇下面评论了这个错误:
https://bugs.webkit.org/show_bug.cgi?id=158782

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么 css "all: unset" 在 MacOS 的 Safari 浏览器中工作得很奇怪? 的相关文章

  • 在分词前添加连字符

    也许这是不可能的 但我想知道是否有一种方法可以在打破单词之前自动在长字符串的末尾插入一个连字符 并且没有空格 这jsfiddle http jsfiddle net 76qBy 演示了我遇到的问题 谢谢 table width 200px
  • 仅当用户打印时如何重定向到另一个页面

    我一直在尝试找到一种在用户实际打印时重定向到另一个页面的方法 也就是说 只有当他们从打印时打开的选项卡中单击该打印按钮时 我才想重定向 我不想要这种方法 function myFunction window print window loc
  • 动态更改复选框不会触发onChange?

    注意 jQuery 不是一个选项 我想检测复选框状态的变化 但是当我这样做时 onChange 事件似乎没有触发 document getElementById myCheckBox addEventListener change func
  • 将变量从 JSON 文件加载到 LESS CSS 预处理器中

    是否可以像使用 Stylus 一样将变量从 JSON 文件加载到 LESS CSS 预处理器中 与文件内容myvars json color1 112345 color2 667890 在 Stylus 中我 json myvars jso
  • 使用 HTML 文本预填充 Gmail 撰写屏幕

    我发现要打开 Gmail 撰写屏幕 您必须登录并打开以下链接 替换变量填充撰写表单上的相应位置 但是 如果我想输入正文多行文本或换行符 即使我对它进行 urlencode 它也不起作用 这里有什么想法吗 检查您的 UrlEncode 方法是
  • 调用函数值[重复]

    这个问题在这里已经有答案了 可能的重复 函数提前触发 https stackoverflow com questions 12201816 function triggering early 我已经编写了这段代码 但是当我调用函数 test
  • 从标签中提取 HTML5 数据属性

    我想从标签中提取所有 HTML5 数据属性 就像这个 jQuery 插件 http www orangesoda net jquery dataset html 例如 给定 span class highlight Joe Bloggs s
  • 仅适用于 Firefox 的不同字体大小

    我只是为我的网站添加一个帐户标题 仅显示玩家的用户名 我正在使用自定义字体 它在 Chrome 和 IE 上运行良好 但是对于 Firefox 它不显示自定义字体 只显示下一个可用字体 即 Verdana 我不介意 但我的问题是 Verda
  • Polygonal Divs——让内容以特定形状溢出?

    这是我目前正在开发的网站 http willcrichton net http willcrichton net 如果单击中间六边形每一侧的箭头 您可以看到它使用 jQuery jQuery Cycle jQuery Easing 左右过渡
  • 以编程方式在网站上输入字符串

    我想知道如何或是否可以通过 iPhone 应用程序代码在网站的文本字段中输入内容 所以我想去一个网站 中间有一个文本字段 我想在那里输入一个特定的字符串 我怎样才能在 Swift 中做到这一点 或 Objective C 然后我会弄清楚它在
  • youtube 将视频嵌入为带有边框半径的 iframe

    我遇到了一个我完全不明白的问题 我有一个带有 YouTube 视频 iframe 的网站 想通过 CSS 来圆化边框 在http www wunschpreisdeal de empfehlung winterreifen profilti
  • 如何清除画布元素中的多边形区域?

    我使用过clearRect函数 但没有看到多边形的等效函数 我天真地尝试过 ctx fillStyle transparent ctx beginPath ctx moveTo 0 0 ctx lineTo 100 50 ctx lineT
  • 如何在html中创建字体选择栏

    我想创建一个下拉菜单 在其中我们可以看到所有可用的字体 并且可以选择我们选择的任何字体 我还想创建一个字体颜色选择小部件 存在大量的字体样式 我想知道如何获取所有这些字体以及如何创建一个小部件 用户可以使用该小部件选择他选择的颜色 为了创建
  • 使用 CSS 等高列

    我想对我的 CSS 表使用百分比 不幸的是 它对我不起作用 这段代码有什么问题 我应该使用 flexbox 而不是 table 吗 我想使用表格 因为我想要相同高度的列 ul list style none margin 0 display
  • 异步 JS 加载到 head 中

    我需要将脚本异步加载到页面上 我正在使用createElement方法在头部动态插入脚本标签 发生的事情是首先加载页面源 完成后 头部中包含的所有元素都会并行加载 一旦全部加载完毕 我动态添加的脚本就会加载 这在逻辑上是有道理的 但我正在寻
  • CSS 过渡或动画从顶部向上滑动:100% 到底部:0

    内部 div 的高度可变 具体取决于内部文本的长度 该高度始终比外部 div 短 我希望当外部 div 悬停时 内部覆盖 div 从 top 100 向上滑动到bottom 0 我下面的 CSS 代码没有产生我想要的向上滑动效果 它只是在外
  • 验证动态添加的输入字段

    我用过this http docs jquery com Plugins Validation以下表单的 jquery 验证插件
  • GWT - 让 CellTable 单元格使用 HTML?

    我有一个 CellTable 我想将 HTML 代码放入单元格中 以下代码不起作用 空格已从输出中删除 TextColumn
  • CSS 或 Javascript - 如果背景图像未加载,则显示后备文本[重复]

    这个问题在这里已经有答案了 如果徽标图形文件未加载或丢失 如何显示文本而不是徽标 我有带有背景 PNG 图像的 div div class iHaveBgImage this text should be displayed if bg i
  • 父级 div 未扩展到子级的高度

    正如你将看到的 我有一个div innerPageWrapper 包围包含内容的 div innerPageWrapper在视觉上也确实充当布局中的半透明边框 我的问题是 innerPageWrapper不会扩展以容纳内部的子元素 更不用说

随机推荐