45

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

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

<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 作为链接，这实际上非常有用。

4

9 回答 9

30

来自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-only 和 CSS2-only 用户代理可以实现这个替代模型，并且仍然声称符合 CSS 2.1 的这一部分。这不适用于本规范发布后开发的 UA。

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

于 2009-04-16T23:51:20.543 回答
15

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

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

于 2009-04-14T06:40:55.003 回答
5

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

于 2009-04-14T06:50:06.197 回答
1

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

于 2009-04-14T06:41:09.417 回答
1

页面元素是否仍然有效？

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

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

于 2009-04-14T12:52:45.700 回答
0

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

于 2009-04-14T06:35:37.400 回答
-1

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

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

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

专注于重要的事情。

于 2013-12-13T15:31:53.477 回答
-2

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

于 2009-04-14T06:37:52.483 回答
-3

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

于 2009-05-26T10:13:12.043 回答