html - Twig 之间渲染的隐形角色包括

Question

我的 Twig include 遇到了一个奇怪的问题，它在我的 HTML 上渲染了一些不可见的字符。我尝试以一千种不同的方式进行谷歌搜索，但找不到任何有类似问题的人。事实上，我什至不确定它是否与 Twig 或 Symfony 或其他相关，所以我不确定我需要寻找什么。我会尝试一下

在我的一个 View 中的两个不同点，我使用 for 循环通过 include 单独的 twig 文件来渲染每个 li ，每次都有一组不同的参数。这两个循环是:

<ul class="search-results">
    {% for entity in entities %}
        {% include 'SomeBundle:Users:renderUserResults.html.twig' with {'entity':entity, 'callType':0} %}
    {% endfor %}
</ul>

和

<ul class="search-results">
    {% for entity in entities %}
        {% include 'SomeBundle:Users:renderUserResults.html.twig' with {'entity':entity, 'time_search':time_search, 'time_meeting_search':time_meeting_search} %}
    {% endfor %}
</ul>

renderUserResults.html.twig 明显相关的内容就是:

{% set role = common.roleClass(entity.type)|trim %}
<li class="{{ role }}">
    // a bunch of html
</li>

---

但是，生成的代码在这两种情况下有一个奇怪的差异。在第一个中，所有 li 元素都生成得很好，一个接一个，它们之间只有一些空格，浏览器会忽略这些空格。但在第二个中，Chrome Web Inspector 在每个 li 之前显示一些非折叠空间，如下所示:

当右键单击其中一个空格并选择“编辑为 HTML”时，出现此红点:

该空间防止每个 li 的顶部和底部边距折叠(li 被渲染为一列框)，因此创建了额外的空间，我不想要。我无法显示渲染列表的屏幕截图，所以我希望我提供了足够的信息。

---

所以底线是，我需要去掉那些红点，但我不知道它们为什么或在哪里创建。正如您所看到的，两种情况之间的唯一区别是通过包含传递的参数集，但我看不出这会如何导致出现奇怪的字符。我已经尝试在任何地方使用 {% spaceless %} 标签，并手动删除 twig 文件中的所有空格和换行符，但它们都不起作用。手动删除 Web 检查器中的红点会使 html 标签之间的所有空格再次折叠，但这当然不是一个选项。

Answer 1

这些症状表明您的文件包含 utf8 Byte Order Mark 。它呈现为不可见字符，并且可以轻松破坏 php 代码，建议您始终保存不带 BOM 的 utf8 文件 - 所有最新的编辑器都支持此功能。