代码之家 › 专栏 › 技术社区 › Michael Buen

Chrome版本109打破了自定义标签上的更改

css html

Michael Buen · 技术社区 · 2 年前

自2021年4月以来,我在Chrome上使用以下HTML和CSS,它一直有效

<head>

    <style>
        x-sentence {
            border-bottom: solid;
        }


        x-word {
            display: inline-flex;
            flex-direction: column-reverse;
        }

        x-word::after {
            content: 'ð';
        }
    </style>

</head>

<body>

    <x-sentence>
        <x-word>Hello world</x-word> nice view <x-word>there</x-word>
    </x-sentence>

</body>

它仍在Safari上运行(包括macOS和iOS):

它正在旧版本的Chrome上运行,例如。 version 107 (2022年11月28日)

参考文献: https://github.com/chinese-words-separator/chinese-words-separator.github.io/issues/5

然而,在最新版本的Chrome(109)上,上述HTML和CSS不再有效:

请注意,问题(边框底部)可以通过使用非自定义标记来解决,例如,更改 x-sentence 自定义标记到 div class='x-sentence' ;即使在 x-word 自定义标记更改为 span class='x-word 虽然然而,我使用自定义标记,以便 Chrome extension 和 Safari extension 可以防止CSS和样式与页面的冲突问题,我仍然更喜欢在使用自定义标记的同时解决这个问题

Chrome 109是否引入了错误?还是我依赖于非标准的HTML行为来进行自定义标记?

是否可以在仍然使用自定义标记的情况下解决问题?

更新2023-Jan-28

问题解决者 fubar

需要进行更改,以便像Chrome 109之前那样工作:

vertical-align: ${guideOnTop ? 'text-bottom' : 'baseline'};

添加的代码对Safari没有副作用,对Safari也有效

1 回复 | 直到 2 年前

fubar 2 年前

我想知道Chrome中没有样式的元素的默认样式是否发生了变化。添加更多的CSS可以解决这个问题。

<head>

    <style>
        x-sentence {
            border-bottom: solid;
            display: inline-block;
        }


        x-word {
            display: inline-flex;
            flex-direction: column-reverse;
            vertical-align: bottom;
        }

        x-word::after {
            content: 'ð';
        }
    </style>

</head>

<body>

    <x-sentence>
        <x-word>Hello world</x-word> nice view <x-word>there</x-word>
    </x-sentence>

</body>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前