live-preview-root 弄乱了我的 html 和 css 网格答案

【问题标题】：live-preview-root messing up my html and css gridlive-preview-root 弄乱了我的 html 和 css 网格
【发布时间】：2023-01-24 05:19:46
【问题描述】：

我有一个使用 CSS 网格的网络应用程序，以前从未遇到过这个问题。我的 html 中有一个 live-preview-root div，它破坏了我的布局。 This is the inspect screenshot

This is the screenshot of what is happening to my app

我希望有人能阐明这里可能发生的事情。

【问题讨论】：

欢迎来到堆栈溢出。请使用 tour 了解 Stack Overflow 的工作原理，并阅读 How to Ask 了解如何提高问题的质量。然后edit你的问题将你的源代码作为一个有效的minimal reproducible example包括在内，其他人可以测试它。

标签： html css-grid

【解决方案1】：

live-preview-root 元素由 Visual Studio 浏览器链接添加，用于“浏览器链接”或“热重载”功能 (Even if you have "Browser Link" disabled, it will be added.)

在this forum post in Microsoft Developer Community 和this related StackOverflow question 中，如果您启用了“浏览器链接”或“热重载”，它看起来像“浏览器链接”元素和代码被注入。

如果您想完全删除 live-preview-root 元素，您必须禁用“浏览器链接”和“热重载”，如相关 StackOverflow 问题中所建议的那样。

我喜欢“热重载”，所以我在开发环境中向display: nonelive-preview-root元素添加了一个CSS脚本；这修复了我的网格布局样式。

在你的布局文件中：

<environment include="Development">
    <!-- Hide the browser-link element, which screws up our styling -->
    <link rel="stylesheet" href="~/css/browser-link.css"/>
</environment>

browser-link.css:

live-preview-root {
    display: none;
}

【讨论】：