html Chrome版本109对自定义标签进行了重大更改

t30tvxxf 于 2023-01-28 发布在其他

关注(0)|答案(1)|浏览(235)

自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不再工作：

请注意，问题（border-bottom）可以通过使用非定制标签来修复，例如，将x-sentence定制标签改变为div class='x-sentence';即使x-word自定义标签更改为span class='x-word，文本"nice view"仍然错误对齐。然而，我使用自定义标签是为了使Chrome extension和Safari extension可以防止页面的CSS和样式冲突问题，我仍然喜欢在使用自定义标签的同时解决这个问题
是Chrome109引入了一个bug吗？还是我依赖于非标准的HTML行为来定制标签？
是否可以在使用自定义标记的同时修复此问题？

Html

来源：https://stackoverflow.com/questions/75216867/chrome-version-109-breaking-change-on-custom-tag

1条答案

按热度按时间

c7rzv4ha1#

我想知道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>

赞(0）回复(0）举报 2023-01-28

我来回答

html Chrome版本109对自定义标签进行了重大更改

1条答案

相关问题

热门标签

最新问答