如果一个块元素包含另一个块元素，那么将块元素更改为与 CSS 内联是错误的吗？

Is it wrong to change a block element to inline with CSS if it contains another block element?

提问人：Matthew James Taylor 提问时间：4/14/2009 最后编辑：Matthew James Taylor 更新时间：12/13/2013 访问量：21656

问：

我知道将块元素放在内联元素中是错误的，但是以下内容呢？

想象一下这个有效的标记：

<div><p>This is a paragraph</p></div>

现在添加这个 CSS：

div {
   display:inline;
}

这会产生一种情况，即内联元素包含块元素（默认情况下，div 变为内联，p 为块）

页面元素是否仍然有效？

我们如何以及何时判断 HTML 是否有效 - 在应用 CSS 规则之前或之后？

更新：从那以后，我了解到，在 HTML5 中，将块级元素放在链接标签中是完全有效的，例如：

<a href="#">
      <h1>Heading</h1>
      <p>Paragraph.</p>
</a>

如果您希望将一大块 HTML 作为链接，这实际上非常有用。

HTML CSS W3C XHTML

评论

3赞 JKirchartz 2/11/2012
我很高兴 html5 认为这是有效的，但有效的代码并不是网络的全部。谷歌使用的代码看起来像是可怕的标签汤，但它有效。

答：

0赞 Adam Alexander 4/14/2009 #1

我不知道这是否验证了任何规则，但我建议使用 W3C HTML 验证器和 W3C CSS 验证器来确定这一点。希望这对您有所帮助！

-2赞 Sergei Kovalenko 4/14/2009 #2

我认为，（x）html是有效的，css是有效的。结果有效吗？是的，如果它按照您的意愿在浏览器中查找。

评论

1赞 Guffa 4/14/2009
使用浏览器验证代码的问题在于，您需要为希望页面工作的每个系统上每个浏览器的每个新版本重新验证页面......
0赞 Sergei Kovalenko 4/15/2009
是的，我知道这是真正的问题。浏览器不是验证者:)我认为，关于HTML+CSS结果验证的问题是一个品味问题。人为因素。
15赞 Guffa 4/14/2009 #3

无论它是否有效，元素结构都是错误的。不将块元素放在内联元素中的原因是浏览器可以以易于预测的方式呈现元素。

即使它没有违反 HTML 或 CSS 的任何规则，它仍然会创建无法按预期呈现的元素。浏览器必须处理这些元素，就像 HTML 代码无效一样。

评论

4赞 mgPePe 3/11/2012
那么，当你需要表格中的一整行是可点击的时，你会怎么做呢？
2赞 Guffa 3/11/2012
@mgPePe：有几种选择。您可以在行中的每个单元格中放置一个链接，可以使用 Javascript 捕获行上的单击事件，或者可以使用与表格不同的内容。
0赞 mgPePe 3/12/2012
是的，JS是一个很好的解决方案。我最终做的是根据这个例子有一个嵌套：jakpsatweb.cz/css/css-vertical-center-solution.htmlaspan display="block"
4赞 Mark Amery 4/13/2015
@Guffa我投了反对票，因为在我看来，简单地断言某些东西是“错误的”似乎很奇怪，尽管规范指出它是有效的，而且我无法从你的回答中看出什么时候 - 如果有的话 - 浏览器的正确行为不清楚。也许我遗漏了什么，但读完这篇文章后，我不清楚“它创造了无法按预期渲染的元素”的说法是否属实，甚至不清楚这意味着什么。
0赞 Guffa 4/13/2015
@MarkAmery：规范没有说明它是有效的。
1赞 Samir Talwar 4/14/2009 #4

HTML 独立于 CSS 进行验证，因此页面仍然有效。我相当确定 CSS 规范也没有提到它，但不要引用我的话。但是，我会非常小心地使用这样的技术，因为虽然它可能会在某些浏览器中按预期呈现，但您需要对它们进行所有测试——我没有看到很多保证。

5赞 VirtuosiMedia 4/14/2009 #5

HTML 和 CSS 仍然有效。理想情况下，你不必做这样的事情，但CSS的那部分实际上是一种方便的（语法上有效，但语义上无效）的方法，可以获取Internet Explorer的双边距错误，而无需诉诸条件样式表或黑客，这将使你的CSS无效。（X）HTML 比 CSS 具有更多的语义值，因此 CSS 在语义上的有效性并不重要。在我看来，这是可以接受的，因为它解决了烦人的浏览器问题，而不会使您的代码无效。

1赞 bobince 4/14/2009 #6

页面元素是否仍然有效？

HTML 意义上的“有效”，是的;HTML 对 CSS 一无所知。

然而，你在浏览器中获得的渲染是CSS规范“未定义”的，所以它可能看起来像任何东西。虽然你可以在针对一个特定浏览器的CSS黑客中包含这样的规则（你知道该浏览器是如何呈现这种情况的），但它不应该提供给一般的浏览器。

评论

1赞 mgPePe 3/11/2012
并问你...如何使表格的整行可点击？
0赞 bobince 3/11/2012
@mgPePe：您在每个单元格中放置一个链接并将其设置为填充单元格的宽度。display: block
0赞 mgPePe 3/11/2012
出现了 2 个问题：我可以拥有吗，还有：然后我可以放入 span 块，这是否有效？<a><span style="display:block"></span>[..more spans]</a>vertical-align: middle
0赞 bobince 3/11/2012
@mgPePe：是的！为了清楚起见，可能也放在上面？display: block<a>
0赞 mgPePe 3/11/2012
是的，那也是，但我仍然有在 SPAN 上不起作用的问题。:\据我所知，只有表格才能实现它vertical-align: middle
31赞 Alohci 4/17/2009 #7

从 CSS 2.1 规范：

当内联框包含流入块级框时，内联框（及其在同一行框中的内联祖先）在块级框（以及任何连续或仅由可折叠的空格和/或流外元素分隔的块级同级）周围被破坏，将内联框拆分为两个框（即使任何一侧为空）， 块级框的每侧各一个。换行符前和换行符后的行框包含在匿名块框中，块级框成为这些匿名框的同级框。当此类内联框受到相对定位的影响时，任何生成的转换也会影响内联框中包含的块级框。

如果符合以下规则，则此模型将应用于以下示例：

p    { display: inline }
span { display: block }

与此 HTML 文档一起使用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
  <TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
  <BODY>
    <P>
      This is anonymous text before the SPAN.
      <SPAN>This is the content of SPAN.</SPAN>
      This is anonymous text after the SPAN.
    </P>
  </BODY>

P 元素包含一个匿名文本块 （C1），后跟一个块级元素，后跟另一个匿名文本块 （C2）。生成的框将是一个表示 BODY 的块框，其中包含一个围绕 C1 的匿名块框、SPAN 块框和另一个围绕 C2 的匿名块框。

匿名框的属性继承自封闭的非匿名框（例如，在示例中，小节标题“匿名块框”下方，即 DIV 的框）。非继承属性有其初始值。例如，匿名框的字体继承自 DIV，但边距将为 0。

在导致生成匿名块框的元素上设置的属性仍适用于该元素的框和内容。例如，如果在上面的示例中在 P 元素上设置了边框，则边框将围绕 C1（在行的末尾打开）和 C2（在行的开头打开）绘制。

一些用户代理以其他方式在包含块的内联上实现了边框，例如，通过将此类嵌套块包装在“匿名行框”中，从而在此类框周围绘制内联边框。由于 CSS1 和 CSS2 没有定义此行为，因此仅 CSS1 和仅 CSS2 的用户代理可以实现此替代模型，并且仍声明符合 CSS 2.1 的这一部分。这不适用于本规范发布后开发的 UA。

随心所欲。显然，这种行为是在CSS中指定的，尽管它是否涵盖所有情况，或者是否在当今的浏览器中一致地实现尚不清楚。

评论

0赞 Chad 6/25/2013
只是为了澄清一下，在我看来，这并没有错，而是你“可以”的 css 规范的一部分。它需要在浏览器上做额外的工作才能创建匿名块。在 Web 浏览器之间也不一致。
1赞 Marius Mucenicu 4/2/2019
你好@Alohci。我的情况是这样的.这里所有元素都有其正常的显示属性，但是我使用带有一些文本内容的 with ，并将该伪元素设置为 block。该元素是 的子元素，其子元素是 的子元素。由于内联元素不支持宽度，因此宽度 100% 在这里如何工作？我觉得我处于这个匿名盒子的场景中，你能为我指出正确的方向吗？感谢<div><a><span>Some text</span></a></div>::after pseudo-element<span>spanadiv
2赞 Alohci 4/2/2019
@George - 您经常会看到诸如“块元素 [在正常流程中] 占用其父元素宽度的 100%”之类的语句。这实际上是不正确的。如果你看一下第 10.3.3 节 正常流中的块级、未替换的元素，你会发现它实际上是“块元素 [在正常流] 中 100% 取其包含块宽度的 100%”。像 span 这样的内联元素不是块容器。取而代之的是，最近的祖先元素是块容器（即 div 元素）用于建立 100% 的宽度。
0赞 Marius Mucenicu 4/2/2019
@Alohci完全有道理。谢谢先生！
1赞 Alohci 4/16/2023
@GeorgeMeijer - 严格来说，两者都不是，但很微妙。出于上述引用文本的目的，body 元素的内容被拆分为三个方框，其中包含：1.跨度之前 P 元素的部分;2 跨度;3 跨度之后的 P 元素截面。1 和 3 是匿名块框。直接在 P 元素内的文本（例如，“这是 SPAN 之前的匿名文本”）位于命名的内联框（即名为“P”）内，因此不需要任何匿名内联框。
-3赞 Pramod 5/26/2009 #8

不，这不是一个错误的选择。我们可以根据要求使用。

-1赞 dkellner 12/13/2013 #9

如果你遵循一个逻辑，你最终像这样实现它，那没有错。工作的东西不会仅仅因为它们很奇怪而“错”。是的，这很不寻常，但它有帮助，这不是一个错误。这是故意的。HTML 和 CSS 应该为你服务，而不是相反，所以永远不要听评论告诉你不要仅仅因为它丑陋而这样做。

通常将解决方案称为“无效”，并建议绕开该块很长的路要走。有时你可以重新思考你做了什么。但是你所做的事情可能有很多原因，他们没有考虑它们。

我确实经常在内联中使用块。它是有效的，并且正在工作 - 在大多数情况下没有必要。那又怎样。还记得XHTML告诉我们总是在属性周围加上引号（如果你不这样做，每个人都会对你大喊大叫！），现在HTML5允许在里面没有空格时省略它们。单数标签后面的最后一个斜杠发生了什么？“<br />”？加油。标准在变化。但是浏览器也一直支持非标准的东西。CENTER 已弃用;我们已经到了 2013 年，它仍然有效。TABLE用于垂直居中？有时这是唯一的方法。在 A 内部进行 DIV 以使其按计划悬停？继续吧。

专注于重要的事情。

上一个：如何链接到页面的一部分？（哈希？

下一个：如何正确转义 HTML 属性中的引号？