Question

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

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

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

现在添加这个CSS：

div {
   display:inline;
}

这会创建一个内联元素包含块元素的情况（div变为内联，p是默认的块）

页面元素是否仍然有效？

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

更新：我已经了解到在HTML5中将块级元素放在链接标记中是完全有效的，例如：

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

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

Answer 1

来自CSS 2.1 Spec：

当内联框包含一个流内块级别框时，内嵌框（及其同一行框内的内联祖先）在块级框（以及任何连续的块级兄弟）中被打破。仅由可折叠的空白和/或流出元素分隔），将内联框分成两个框（即使任一边为空），块级框的每一边一个。中断前和中断后的行框都包含在匿名块框中，块级框成为这些匿名框的兄弟。当这样的内联框受到相对定位的影响时，任何结果转换也会影响内联框中包含的块级框。

如果遵循以下规则，此模型将适用于以下示例：
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中指定的，尽管它是否涵盖所有情况，或者在当今的浏览器中是否一致地实现，目前还不清楚。

Answer 2

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

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

Answer 3

HTML和CSS都仍然有效。理想情况下，您不必执行类似这样的操作，但CSS的特定位置实际上是一种方便的（在语法上有效但在语义上无效）方式来获取Internet Explorer的双边距错误而无需使用条件样式表或无效的黑客攻击你的CSS。（X）HTML具有比CSS更多的语义值，因此CSS在语义上有效并不重要。在我看来，这是可以接受的，因为它解决了一个烦人的浏览器问题而没有使代码无效。

Answer 4

HTML的验证独立于CSS，因此页面仍然有效。我很确定CSS规范也没有说明，但不要引用我的那个。但是，我会非常小心地使用这样的技术，因为虽然它可能会在某些浏览器中呈现，但你需要测试它们 - 我没有看到很多保证。

Answer 5

页面元素是否仍然有效？

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

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

Answer 6

如果这可以验证任何规则，我不知道我的头脑，但我建议使用W3C HTML Validator和W3C CSS Validator来确定。希望这有用！

Answer 7

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

Answer 8

如果你有一个逻辑，你最终会像这样实现它，那就不错了。工作并不是“错误的”只是因为它们很奇怪。是的，这很不寻常，但它有帮助，这不是一个错误。这是故意的。 HTML和CSS应该为你服务，而不是相反，所以不要听评论告诉你不要只是因为它很难看。

通常将解决方案称为“无效”，并建议在该块周围进行很长时间。有时你可以重新思考你做了什么。但是你做了什么可能有很多原因，他们不会考虑它们。

我会定期在内联中使用块。它有效且有效 - 在大多数情况下它不是必需的。所以呢。请记住，当XHTML告诉我们总是在属性周围加上引号时（如果你没有，大家都会对你大喊大叫！），现在HTML5允许在内部没有空格的情况下省略它们。奇异标签后最后一次斜线发生了什么变化？ “＆lt; br /＆gt;” ？来吧。标准改变。但浏览器也不断支持非标准的东西。 CENTER已被弃用;我们在2013年，它仍然有效。垂直居中的表格？有时它是唯一的方式。在A中进行DIV以使其按计划悬停？继续吧。

专注于重要的事情。

Answer 9

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

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

9 个答案: