6

我正在尝试使用 CSS Containment( contain: layout)，但它似乎无法在 Chrome 62 上正常工作。

我想知道正确的使用方法contain: layout或我的误解是什么。

代码在这里：

索引.html：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSS Containment</title>
    <script src="main.js" defer></script>
</head>
<body>
    <div id="container" style="contain: layout; height: 300px; width: 300px">
    </div>
</body>
</html>

主.js：

const container = document.querySelector('#container');

setTimeout(() => {
    const elem = document.createElement('div');
    elem.textContent = 'content';
    container.appendChild(elem);
}, 100);

我希望 #container 元素在 之后呈现为布局根appendChild(elem)，但 Chrome 开发工具显示根仍然是 #document。

屏幕截图在这里。

另一方面，contain: layout size或contain: strict正常工作，这意味着#container 成为布局根。

其他浏览器还不支持 CSS Containment，所以我无法确定它是特定于 Chrome 的还是符合规范的。

如果您有任何想法，请帮帮我。

4

0 回答 0