浏览器之前和UL

检查后，这个网站码浏览器之前和UL

<p>test</p> 
<p> 
    <ul> 
    <li> 
    <span style=\"line-height: 1.42857;\">1 
    </span> 
    <br> 
    </li> 
    <li> 
    <span style=\"line-height: 1.42857;\">2&nbsp; 
    </span> 
    <br> 
    </li> 
    <li> 
    <span style=\"line-height: 1.42857;\">3 
    </span> 
    <br> 
    </li> 
    <li> 
    <span style=\"line-height: 1.42857;\">4 
    </span> 
    <br> 
    </li> 
    </ul> 
    <p> 
    <span style=\"line-height: 20px;\">more text 
    </span> 
    </p> 
</p>

出于某种原因，使不需要P，前后<ul>空它被渲染后（我试过到目前为止铬和FF）。

检查这个plunker here并尝试检查结果，你会看到这样的事情

<body> 
    <p>test 
</p> 
<p> <----------THIS 
    </p> 
<ul> 
    <li> 
    <span style="\&quot;line-height:" 1.42857;\"="">1 
    </span> 
    <br> 
    </li> 
    <li> 
    <span style="\&quot;line-height:" 1.42857;\"="">2&nbsp; 
    </span> 
    <br> 
    </li> 
    <li> 
    <span style="\&quot;line-height:" 1.42857;\"="">3 
    </span> 
    <br> 
    </li> 
    <li> 
    <span style="\&quot;line-height:" 1.42857;\"="">4 
    </span> 
    <br> 
    </li> 
    </ul> 
    <p> 
    <span style="\&quot;line-height:" 20px;\"="">more text 
    </span> 
    </p> 
<p></p> <-------------- AND THIS 


</body>

想不通为什么。任何提示？

来源

2016-01-26 brazorf

您试图错误地嵌套标记。 A 标记不能包含其他或列表（<ul>或<ol>）标记。

从the specification：

列表元素（特别是ol和ul元素）不能p元素的孩子。因此，当一个句子包含一个项目符号列表时，可能会想知道它应该如何标记。

...希望方便风格由多个“结构性”的段落，例如“逻辑”的段落可以使用p元素，而不是div元素

作者。

您所看到的是浏览器尝试通过为不匹配的开始和结束标记分别提供关闭和打开标记来处理无效标记（misnested tags）。当浏览器看到<ul>时，它会关闭仍在打开的。在你的例子中，当它看到最后的时，它提供了一个来匹配。

正如昆汀的答案指出的那样，您应该使用HTML validator。

备注：你的HTML中有很多\"，你应该只有"。我认为这是因为这个HTML实际上是由PHP或其他语言编写的，但这就是为什么你会看到奇怪的属性，如style="\"line-height:" 1.42857;\"=""。

来源

2016-01-26 17:17:35

是的，逃脱的报价是在那里，因为我从数据库列中抓取代码，忘了把它们全部隐藏起来。 – brazorf

段落不能包含列表（或其他段落）。

段落的结束标记是可选的。

UL开始标签隐式关闭P元素。

Validators是有用的工具。

来源

2016-01-26 17:14:20 Quentin

写了很多年的HTML，并且刚刚学到了。 –

同样在这里，不幸的是 – brazorf

浏览器之前和UL

回答

相关问题