javascript - Script 标签将 Javascript 呈现为具有看似有效的 HTML 的文本

Question

我有一个脚本标签，它从 html 正文元素中删除了两层。出于某种原因，当此脚本标记呈现时，所有文本都呈现而不是被解释为 JS:

因此，标签无法正确呈现。脚本文本呈现在屏幕上而不是被识别为 JS 代码:

以上是我将 javascript 代码渲染为文本的导航栏。生成文本的 html 是:

<span class="account-button" onclick="accountButtonPressed()">
    {% if user.is_authenticated %}
        Sign In
    {% else %}
        Sign Out
    {% endif %}
</span>


<script>function accountButtonPressed(){if(isSignedIn){signUserOut();}else{toggleCreateAccount();}}</script>

我在网上其他任何地方都找不到这个错误。我想知道此时是否是 chrome 错误或其他错误，因为我的 HTML 似乎 完全有效。 Chrome 版本 75。来 self 的编码的所有 javascript 都包含在 HTML 文件中。 HTML 在网络选项卡响应 View 中以同样错误的方式呈现。

Answer 1

似乎如果你设置display: inline-block到 <script>标记，它将脚本呈现为文本。我不小心在 CSS 中设置了样式。