2009-04-14 142 views
39

我知道在一个内联元素中放置一个块元素是错误的,但以下情况如何?如果块元素包含另一个块元素,将块元素更改为内联CSS是错误的吗?

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

<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中的大块其实,这是非常有用的成为一个链接。

+2

我很高兴html5认为这个有效,但有效的代码并不是最终所有的网络。谷歌使用的代码看起来像可怕的碎标签汤,但它的工作原理。 – JKirchartz 2012-02-10 21:06:19

回答

22

CSS 2.1 Spec

当inline框包含一个在流块级框,内联框(和相同的行框内的内联祖先)围绕块级框破(以及仅由可折叠空白和/或不流动元素连续或分隔的任何块级别的同胞),将内联框分成两个框(即使任何一边都是空的),框的两边各一个电箱(es)。休息之前和休息之后的线框包含在匿名块框中,并且块级框成为这些匿名框的兄弟。当这样的内联框受到相对定位的影响时,任何生成的转换也会影响内联框中包含的块级框。

该模型将适用于下面的例子中,如果下面的规则:

<!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):

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

用此HTML文档中使用接着是块级元素,后面是另一个块(C2)的匿名文本。结果框将是代表BODY的块框,其中包含围绕C1的匿名块框,SPAN块框以及围绕C2的另一个匿名块框。

匿名框的属性是从封闭的非匿名框(例如,在子部分标题“匿名块框”下面的示例中,DIV的框)继承的。非继承属性具有初始值。例如,匿名框的字体是从DIV继承的,但边距将为0.

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

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

这就是你会的。很明显,行为是在CSS中指定的,尽管它是覆盖所有情况还是在当今的浏览器中一致地实现尚不清楚。

-1

我想,(x)html是有效的,css是有效的。结果是否有效?是的,如果它是在你想要的浏览器中查找。

+0

使用浏览器验证代码的问题是,您需要在每个希望网页工作的系统上的每个浏览器的每个新版本重新验证页面...... – Guffa 2009-04-14 07:37:22

+0

是的,这是真正的问题,我知道。 浏览器不验证:)我认为,关于HTML + CSS结果验证的问题是一个品味问题。人的因素。 – 2009-04-15 10:33:45

15

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

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

+3

那么当你需要表中的整行可点击时,你会做什么? – mgPePe 2012-03-10 18:57:20

+2

@mgPePe:有几个选项。您可以在该行的每个单元格中放置一个链接,您可以使用Javascript来捕捉该行的单击事件,也可以使用与表格不同的内容。 – Guffa 2012-03-11 12:42:24

2

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

5

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

1

页面元素仍然有效吗?

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

然而,你在浏览器中获得的渲染是由CSS规范'未定义'的,所以它可能看起来像任何东西。虽然您可以在针对特定浏览器(您知道浏览器如何呈现此案例)的CSS黑客中包含这样的规则,但不应将其用于浏览器。

-1

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

-1

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

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

我确实在内部使用内嵌块。它是有效的,它的工作原理 - 在大多数情况下它不是必需的。所以呢。请记住,当XHTML告诉我们总是在属性周围加上引号时(如果没有的话,所有人都向你大喊),现在HTML5允许在内部没有空间的情况下忽略它们。奇异标签后最后一次斜杠发生了什么? “< br/>”?来吧。标准改变。但浏览器也支持非标准的东西。 CENTER已弃用;我们在2013年,它仍然有效。垂直居中表?有时候这是唯一的方法。 A中的DIV使其按照您的计划悬停?前进吧。

专注于重要的事情。