强制浏览器忽略 HTML 代码中的空格？答案

【问题标题】：Forcing browsers to ignore whitespace in HTML code?强制浏览器忽略 HTML 代码中的空格？
【发布时间】：2015-07-04 05:52:40
【问题描述】：

最近我遇到了 Firefox 兼容性问题，我在一个 chrome 网站上工作，当我在 Firefox 上测试它时，我的 div 搞砸了。所以在试图弄清楚问题是什么之后，我发现了一个关于我的问题的线程！显然，Firefox 可以识别我的 HTML 代码中的空格并相应地分隔我的 div。那么，有没有办法让 Firefox 忽略我代码中的空格？我真的不介意在一行上处理我的所有 div，但如果我可以将我的代码隔开，那么组织起来会容易得多。另外，如果可以的话，有什么缺点（如果有的话）？

This 是我所说的线程。谢谢 Drkawashima！

【问题讨论】：

识别空白有什么关系？我从来没有遇到过 Firefox 的问题，我已经创建了 30 个站点。应该添加一些代码和小提琴之类的东西，这样我们才能看到问题。
禁止渲染所有空格会导致糟糕的结果！想想删除了空格的文本段落......正如您在该线程中看到的那样，只有在使用内联渲染时才会出现效果。在这种情况下，实际上会期望空格被渲染。
问题是当有/li><li vs /li>\n<li 之类的东西时（我相信它只会影响内联块..）。 “解决方案”是将结束标签和打开标签嵌套在一起，并将换行符（或其他空格）放在其他地方，即使它在代码中看起来不是最干净的。
如果元素显示设置为 inline 或 inline-block 那么元素之间确实会显示一个空格字符。如果要移除它，将元素的显示设置为block并将它们浮动到左侧。
可能重复 - stackoverflow.com/questions/5078239/…

标签： html css firefox whitespace

【解决方案1】：

您可以将 div 的 font-size 设置为 0 并将 div 内的每个元素的 font-size 设置为 1rem：

div {
    font-size: 0;
}

div > * {
    font-size: 1rem;
}

【讨论】：