Question

body - HTML：

<body>
    <div id="header-image">
        <img id="logo" src="/res/img/logo.png" />
    </div>
    <div id="menu-container">
                <ul>
            <li class="login"><a href="/login.php">Login</a></li>
        </ul>
            </div>
    <div id="content"><p class="info-box error">Der Benutzer <span class="username">a</span> existert nicht.</p><form action="" method="post">
    <input class="text" type="text" name="name" placeholder="Benutzername" /><br />
    <input class="text" type="password" name="password" placeholder="Passwort" /><br />
    <button type="submit" name="login">Login</button><button type="submit" name="register">Beitreten</button>
</form>
</div>
</body>

我知道白色空间格式对于人眼来说并不是很好，但这不应该影响浏览器渲染（它由一些脏PHP生成，这就是原因）。

问题是Chromes DevTools显示以下空文本： DevTools with empty text

同样不会使我.info-box.error的边距与#menu-container加上的边距合并，它会在#content和{{的开头之间呈现一个空行的空格1}}。假设.info-box.error上有margin: 10px;，总的来说，这会导致超过30个像素的空间，其中只有#menu-container, .info-box（因为边距会折叠）

我不想要这条空行。我怎么能摆脱它？

Answer 1

您应该检查编辑器中是否有“无BOM”格式的文档编码。看起来像编码问题字符。

Answer 2

文本节点不为空，但由（不可见）U + FEFF ZERO WIDTH NO-BREAK SPACE字符组成。它被视为数据字符，而不是空格，除非它出现在文档的最开头，它作为字节顺序标记（BOM）。

所以它应该被删除，可能是通过将某些PHP文件的编码从“带有BOM的UTF-8”改为“没有BOM的UTF-8”，正如@Foxhoundn建议的那样。

PHP软件中长期存在的错误之一是它在连接文件时不会删除BOM。 HTML文档开头的BOM很好，甚至可以推荐，但如果该文件被PHP软件附加或插入到另一个文件中，则不在PHP文件的开头。

Answer 3

尝试格式化HTML代码。由于编码器，它有一些无效字符。

在段落之前添加的空文本节点。为什么？

3 个答案: