浏览器无法很好地呈现 HTML 空 DIV答案

【问题标题】：HTML empty DIVs not well rendered by browsers浏览器无法很好地呈现 HTML 空 DIV
【发布时间】：2015-08-04 16:36:58
【问题描述】：

我收到的 XHTML 文档有时包含以下代码：

<div align="center" />

我的问题是浏览器（Firefox 38.0.1、Chrome 43.0.2357.65）将此代码显示为打开的<DIV> 标记，而不是我预期的空 div（<DIV></DIV>）。因此，文档的其余部分完全混乱。

它是浏览器错误还是 XHTML 功能？代码看起来完全合法（虽然没有意义，但我不是生产者）并且被 XML 解析器接受（Perl XML::LibXML, https://validator.w3.org/check）。

您可以使用以下 XHTML 代码（由https://validator.w3.org 验证）检查它在浏览器中的外观。最后一个 DIV 显示为带边框的文本，这是不应该的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Foo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <div style="border: 1px solid black; color: red;">
      <div />
      <div>Should be red and inside the border.</div>
    </div>
    <div>Should be outside the border and not red.</div>
  </body>
</html>

XHTML Strict Doctype 也是如此。

【问题讨论】：

啊，一个真正的 XHTML 问题。这种情况并不经常发生。

标签： html browser tags xhtml

【解决方案1】：

解决办法是，不要这样做！

在 HTML 中，<div> 标记是开始标记，无论它是否包含 /。 / 被视为错误并被丢弃。

在 XHTML 中，这将是一个完整的 div，是的。但是，如果 XHTML 文件使用 application/xhtml+xml MIME 类型提供，则它们只是 XHTML 文件。
文件的内容是什么并不重要；如果文件以text/html 的 MIME 类型提供，则就浏览器而言，它是一个 HTML 文件。

文件扩展名为.xhtml 的普通文件被视为XHTML，.html 被视为HTML。如果您使用的是 PHP 或 ASP.NET 等系统，则需要为 MIME 类型发送适当的 HTTP 标头，否则它将使用默认值（通常是 text/html）。

【讨论】：

+1，但我会放弃第一行。 OP 正在接收这些 XHTML 文件，因此只需要知道如何正确处理它们。
嗯，但答案仍然是，不要这样做。即使文件是真正的 XML 文件，像这样的结构仍然违反 XHTML 的规则，即使它们是格式良好的 XML（即使它们可以在所有浏览器中正确显示）。所以我不知道该怎么说。
我的意思是，解决方案是什么？将文件更改为 XHTML 文件类型？将内容改为<div></div>?
不，该构造不违反 XHTML 规则。解决方案是使用application/xhtml+xml mime 类型提供文件，或者使用 XML 解析器将文件解析为 DOM，然后将其序列化为 (text/html) HTML。
@Alohci 但W3C 说“除了在 DTD 中声明为 EMPTY 的元素之外的所有元素都必须有一个结束标签。在 DTD 中声明为 EMPTY 的元素可以有一个结束标签或可以使用空元素速记”。