代码之家 › 专栏 › 技术社区 › Matthew James Taylor

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

xhtml w3c css html

Matthew James Taylor · 技术社区 · 17 年前

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

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

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

现在添加以下CSS:

div {
   display:inline;
}

页面元素仍然有效吗?

更新: 后来我了解到,在HTML5中,将块级元素放在链接标记中是完全有效的,例如:

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

9 回复 | 直到 14 年前

Shimmy Weitzhandler 500 - Internal Server Error 13 年前

从 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>
 
 This is anonymous text before the SPAN.
 This is the content of SPAN.
 This is anonymous text after the SPAN.
 
 </BODY>
匿名框的属性继承自封闭的非匿名框(例如,在标题为“匿名块框”的小节下方的示例中,DIV的标题)。非继承属性具有其初始值。例如,匿名框的字体继承自DIV,但边距为0。

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

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

你想怎么做就怎么做。很明显,这种行为是在CSS中指定的,尽管它是否涵盖了所有情况,还是在今天的浏览器中一致地实现还不清楚。

Guffa 17 年前

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

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

VirtuosiMedia 17 年前

HTML和CSS仍然有效。理想情况下,您不必这样做,但CSS的特定部分实际上是一种方便的方法(在语法上有效,但在语义上无效),用于获取Internet Explorer的双边距bug,而无需求助于条件样式表或使CSS无效的黑客。(X)HTML比CSS有更多的语义价值,因此CSS在语义上是否有效并不重要。在我看来,这是可以接受的,因为它解决了一个恼人的浏览器问题,而不会使代码失效。

Samir Talwar PruthviRaj Reddy 17 年前

bobince 17 年前

页面元素仍然有效吗?

在HTML意义上有效,是的;HTML对CSS一无所知。

但是,您在浏览器中获得的渲染不受CSS规范的定义,因此它可能看起来像任何东西。虽然您可以在针对某个特定浏览器(您知道该浏览器如何呈现这种情况)的CSS攻击中包含这样的规则,但一般来说,不应该将其提供给浏览器。

Adam Alexander 17 年前

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

-1

dkellner 12 年前

如果您遵循一个逻辑,并且最终以这样的方式实现它,那么这并没有错。工作中的事情并不是因为奇怪就“错”了。是的,这是非常不寻常的,但它有帮助,这不是一个错误。这是故意的。HTML和CSS应该为你服务,而不是相反,所以永远不要听评论告诉你不要做,因为它很难看。

我经常在内联线中使用块。 它是有效的,而且有效——在大多数情况下都不是必需的。那又怎么样。还记得当XHTML告诉我们总是在属性周围加引号(如果你不加引号,每个人都会对你大喊大叫!)时,现在HTML5允许在没有空间的情况下省略它们。单数标记后的最后一个斜杠怎么了?“ ”?来吧标准改变。但是浏览器仍然支持非标准的东西。中心不推荐使用;我们在2013年,它仍然有效。垂直定心表?有时候这是唯一的办法。在A内俯冲,使其按计划悬停?去吧。

关注重要的事情。

-2

Sergei Kovalenko 17 年前

我认为,(x)html是有效的,css是有效的。结果有效吗?是,如果它在浏览器中按您的需要查看。

-3

Pramod Pramod 17 年前