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

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

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

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

现在添加这个CSS:

 div { display:inline; } 

这创build了一个内联元素包含一个块元素的情况(div变成了内联,并且p是默认的块)

页面元素是否仍然有效?

如何判断HTML是否有效 – 在应用CSS规则之前还是之后?

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

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

这实际上是非常有用的,如果你想要一个大的HTML块作为一个链接。

从CSS 2.1规范 :

当内联框包含一个stream程块级别的框时,内联框(及其在同一行框内的内联祖先)将在块级别框(以及任何仅连续或分隔的块级兄弟可折叠的空白和/或stream出的元素),将内联框分成两个框(即使任何一边都是空的),在块级框的每一侧都有一个框。 rest之前和rest之后的线框被封闭在匿名块框中,并且块级框成为这些匿名框的兄弟姐妹。 当这样的内联框受到相对定位的影响时,任何生成的转换也会影响内联框中包含的块级框。

如果符合以下规则,则此模型适用于以下示例:

 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的那个框中)inheritance的。 非inheritance属性具有初始值。 例如,匿名框的字体是从DIVinheritance的,但边距将是0。

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

一些用户代理已经以其他方式在包含块的内联上实现了边界,例如,通过在“匿名线框”内包装这些嵌套块,从而在这些框周围绘制内联边框。 由于CSS1和CSS2没有定义这种行为,CSS1和CSS2的用户代理可能会实现这个替代模型,仍然声称符合这个部分的CSS2.1。 这不适用于本规范发布后开发的UA。

做你会的。 很显然,CSS中指定了行为,不pipe是覆盖所有情况,还是在当今的浏览器中一致地实现,目前还不清楚。

无论是否有效,元素结构都是错误的。 之所以不将块元素放在内联元素中,是因为浏览器能够以易于预测的方式呈现元素。

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

HTML和CSS将仍然有效。 理想情况下,你不需要做这样的事情,但是CSS的特殊位置实际上是一个方便(在语法上有效但在语义上是无效的)获取Internet Explorer的双重保证金的方法,而不诉诸条件样式表或黑客将无效你的CSS。 (X)HTML具有比CSS更多的语义值,所以CSS在语义上是不重要的。 在我看来,这是可以接受的,因为它解决了一个恼人的浏览器问题,而不会使你的代码失效。

HTMLvalidation独立的CSS,所以页面仍然有效。 我相当肯定CSS规范也没有提到这个问题,但是不要在这个引用我。 不过,我会非常小心地使用这样的技术,因为虽然它可能会在某些浏览器中按照预期呈现,但是您需要全部testing,我没有看到很多的保证。

页面元素是否仍然有效?

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

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

我不知道如果这validation任何规则,但我会build议使用W3C的HTMLvalidation和W3C的CSSvalidation确定。 希望这是有帮助的!

我认为,(x)html是有效的,CSS是有效的。 结果是否有效? 是的,如果它正在浏览器中,你想要的。

不,这不是一个错误的select。 我们可以按照要求使用。

如果你遵循一个逻辑,你最终会像这样实现它,这不是错误的。 工作并不是因为奇怪而“错误”的。 是的,这是非常不寻常的,但它是帮助,这不是一个错误。 这是故意的。 HTML和CSS应该为你服务,而不是相反的方式,所以千万不要听别人的评论,告诉你不要因为它很丑而不去做。

通常将解决scheme称为“无效”,并在该区块周围提出长远build议。 有时候你可以重新思考你做了什么。 但是,你做了什么可能有很多原因,他们不认为它们。

我经常在内部使用块。 这是有效的,它的工作 – 这在大多数情况下是没有必要的。 所以呢。 请记住,当XHTML告诉我们总是在属性周围加上引号(如果没有的话,所有人都会对你大喊大叫),现在HTML5允许在里面没有空格的情况下忽略它们。 单数标签后最后一个斜杠发生了什么? “<br />”? 来吧。 标准改变。 但浏览器也支持非标准的东西。 CENTER已弃用; 我们在2013年,它仍然有效。 垂直居中表? 有时候这是唯一的方法。 A里面的DIV让它按照你的计划盘旋? 前进吧。

专注于重要的事情。