为什么HTML段落< P>在我的Chrome上表现得如此奇怪？ [英] Why the HTML paragraph <P> behaves so oddly on my chrome?
问题描述
< p>< p>获取空的HTML，输入此内容并在Google Chrome上查看其源代码。 DIV>&安培; NBSP;< / DIV> WHY< / p为H.
如果你像我那样做了，你会在源代码中看到：
< html>
< head>< / head>< body>< p>& nbsp;< / p>< div>& nbsp;< / div> WHY？< p>< ; / p为H.
< / body>< / html>
以防万一，这是一个使用jsbin的演示。在那个链接中，你看到这个：
[重复P]
为什么？
[重复P]
我添加了
） p）。html（[重复P]）; $（jsbin.com/iwale4/edit =noreferrer> this jQuery
将整个< div> 从它，一切都恢复正常。在< div> 中添加更多内容时，这种奇怪的意外行为是一致的，它可能是< span> 或者我猜无论在那里。不管HTML格式是否合适，都没关系。
任何人都知道为什么？
作为一个基本的解释， div 应该是布局的框。拿着其他东西的盒子。然而， p 元素是用于（惊喜的）一段文本的。
因为 div （容器）放在 p （内联元素）中，这在技术上是不正确的。谷歌浏览器（它是一个标准微不足道的）浏览器，它试图通过添加额外的元素来纠正这个不正确的嵌套。
W3C有一个（非常长）关于这些语言规范的文章，但是可能要做的最好的事情是检查不一致和潜在的问题，如验证您的书面源代码。最简单的方法是使用 W3C验证器。
Get an empty HTML, type in this and see its source code on Google Chrome:
<p><div> </div>WHY?</p>
If you did it like I did, you'll see this in the source:
<html>
<head></head><body><p> </p><div> </div>WHY?<p></p>
</body></html>
Just in case, here's a demo using jsbin. In that link, you see this:
[repeating P]
WHY?
[repeating P]
I've added this jQuery on it:
$("p").html("[repeating P]");
Remove the whole <div> from it, and everything goes back to normal. This small weird unexpected behavior is consistent when adding more things in the <div>, and it could be a <span> or I guess whatever in there. And it doesn't matter if the HTML is well formated or not.
Anyone knows why?
As a basic explanation, div is meant to be a 'box' for layout. A box for holding other things. The p element, however, is meant to be for (surprise) a paragraph of text.
Because a div (container) was put inside a p (inline element), it is (technically) incorrect. Google Chrome (being the standards-slightly-obsessed) browser that it is, it tries to correct this incorrect nesting by adding the extra elements as shown.
The W3C has a (very long) article about these language specifications on their site, however possibly the best thing to do to check for inconsistencies and potential problems like this is to Validate your written source code. The easiest way to do this is with the W3C Validator.
这篇关于为什么HTML段落< P>在我的Chrome上表现得如此奇怪？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
