如果包含另一个块元素，则将块元素更改为与CSS的内联元素是错误的吗？
我知道在内联元素中放置一个块元素是错误的，但是以下内容呢？
想象一下此有效的标记：
<div><p>This is a paragraph</p></div>
现在添加此CSS：
div {
display:inline;
}
这会创建一个内联元素包含块元素（DIV变为内联元件，默认为b block）的情况
仍然有效吗？
我们如何以及何时判断HTML是否有效 - 应用CSS规则之前或之后？
更新：从那以后我了解到，在HTML5中，将块级别元素放入链接标签中是完全有效的：
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
如果您希望大量的HTML成为链接，那么这实际上真的很有用。
I know it's wrong to put a block element inside an inline element, but what about the following?
Imagine this valid markup:
<div><p>This is a paragraph</p></div>
Now add this CSS:
div {
display:inline;
}
This creates a situation where an inline element contains a block element (The div becomes inline and the p is block by default)
Are the page elements still valid?
How and when do we judge if the HTML is valid - before or after the CSS rules are applied?
UPDATE: I've since learned that in HTML5 it is perfectly valid to put block level elements inside link tags eg:
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
This is actually really useful if you want a large block of HTML to be a link.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
来自 css 2.1 Spec ：
将您所要做的。显然，该行为是在CSS中指定的，尽管它涵盖了所有案例，还是在当今浏览器中始终如一地实施。
From the CSS 2.1 Spec:
Make of that what you will. Clearly the behaviour is specified in CSS, although whether it covers all cases, or is implemented consistently across today's browsers is unclear.
无论是否有效，元素结构都是错误的。您不将块元素放入内联元素的原因是，浏览器可以易于预测的方式呈现元素。
即使它没有打破HTML或CSS的任何规则，它仍然会创建无法按预期渲染的元素。浏览器必须处理元素，就像HTML代码无效一样。
Regardless if it's valid or not, the element structure is wrong. The reason that you don't put block elements inside inline elements is so that the browser can render the elements in an easily predictable way.
Even if it doesn't break any rules for either HTML or CSS, still it creates elements that can't be rendered as intended. The browser has to handle the elements just as if the HTML code was invalid.
HTML和CSS仍将有效。理想情况下，您不必做这样的事情，但是CSS实际上是一种方便的（句法有效但在语义上是有效的），可以使Internet Explorer的双重差距bug获取而不诉诸于有条件的样式表或黑客无效您的CSS。 （x）HTML比CSS具有更多的语义值，因此CSS在语义上有效并不重要。在我看来，这是可以接受的，因为它可以解决令人讨厌的浏览器问题而不会使您的代码无效。
The HTML and the CSS will both still be valid. Ideally, you wouldn't have to do something like this, but that particular bit of CSS is actually a handy (and syntactically valid but not semantically valid) way for getting Internet Explorer's double margin bug without resorting to conditional stylesheets or hacks that will invalidate your CSS. The (X)HTML has more semantic value than the CSS, so it's less important that the CSS is semantically valid. In my mind, it's acceptable because it solves an annoying browser issue without invalidating your code.
HTML独立于CSS验证，因此页面仍然有效。我很确定CSS规格也没有说什么，但不要引用我的话。但是，使用这样的技术，我会非常谨慎，因为它可能会像某些浏览器中呈现，但您需要测试所有内容 - 我看不到做出很多保证。
The HTML is validated independently of the CSS, so the page would still be valid. I'm fairly sure that the CSS spec says nothing about it either, but don't quote me on that one. However, I'd be very careful using a technique like this, as while it might render as intended in some browsers, you'd need to test 'em all—I don't see many guarantees being made.
从HTML意义上说，“有效”，是的； HTML对CSS一无所知。
但是，您在浏览器中获得的渲染是通过CSS规范“不确定的”，因此看起来完全可以。尽管您可以在针对一个特定浏览器的CSS黑客中包含这样的规则（您知道该浏览器是如何呈现此情况的），但不应将其用于浏览器。
“Valid” in an HTML sense, yes; HTML knows nothing about CSS.
The rendering you get in the browser, however, is ‘undefined’ by the CSS specification, so it could look like anything at all. Whilst you could include such a rule in CSS hacks aimed at one particular browser (where you know how that browser renders this case), it shouldn't be served to browsers in general.
我不知道这是否验证了任何规则，但我建议使用 w3c html valiorator 和 w3c css验证器以确定这一点。希望这很有帮助！
I don't know off the top of my head if this validates any rules but I would recommend using the W3C HTML Validator and the W3C CSS Validator to determine that. Hope this is helpful!
如果您遵循逻辑，并且您最终会这样实现，那不是错误的。工作的事情不是“错误”，只是因为它们很奇怪。是的，这是非常不寻常的，但是有帮助，这不是一个错误。这是故意的。 HTML和CSS应该为您服务，而不是相反，因此不要听评论告诉您不要仅仅因为丑陋而这样做。
通常，将解决方案称为“无效”，并在街区周围有很长的路要走。有时您可以重新考虑自己的所作所为。但是您所做的事情可能有很多原因，他们不考虑它们。
我确实会定期使用内线内部的块。它是有效的并且在工作 - 在大多数情况下，它不是必需的。所以呢。请记住，当XHTML告诉我们始终在属性周围列出报价时（如果您不这样做的话，每个人都对您大喊！），现在HTML5允许在内部没有空间的情况下省略它们。在奇异标签之后，最后一击怎么了？ “＆lt; br /＆gt;” ？快点。标准改变。但是浏览器也一直支持非标准的事情。中心被弃用；我们在2013年，仍然有效。垂直中心的表？有时这是唯一的方法。在A内部div以使其按照您的计划悬停？只是继续。
专注于重要的事情。
If there is a logic you follow and you end up implementing it like this, it's NOT WRONG. Working things are not "wrong" just because they're weird. Yes, it's quite unusual but it HELPS and it's not a mistake. It's intentional. HTML and CSS should serve you, not the other way around so don't ever listen to comments telling you not to do it just because it's ugly.
It's typical to call a solution "invalid" and suggest a long way around the block. Sometimes you can rethink what you did. But there can be many reasons for what you did and they don't consider them.
I do use blocks inside inlines regularly. It's valid and it's working - it's just not necessary in most cases. So what. Remember when XHTML told us to always put quotes around properties (and everyone yelled at you if you didn't!), now HTML5 allows to omit them if there's no space inside. What happened to that last slash after singular tags? "<br />" ? Come on. Standards change. But browsers keep supporting non-standard things as well. CENTER is deprecated; we're in 2013 and it still works. TABLE for vertical centering? Sometimes it's the only way. DIV inside A to make it hover as you planned? Just go ahead.
Focus on important things.
我认为（x）HTML有效，CSS是有效的。结果有效吗？是的，如果它根据需要在浏览器中查看。
I think, (x)html is valid, css is valid. Is the result valid? Yes, if it is looking in the browser as You want.
不，这不是一个错误的选择。我们可以根据要求使用。
No, It is not a wrong choice. We can use as per requirements.