41

<li>...</li>在没有将项目封闭在块中的情况下插入页面有什么危险<ul>？例如：

<div style="border:solid 1px red;">
    <li>Item</li>
    <li>Another Item</li>
    <li>Yet Another Item</li>
</div>

验证是我最不关心的问题，我想知道这可能会在浏览器中破坏最终用户按预期查看页面的能力。

4

11 回答 11

44

这根本不是有效的标记。如果显示正确，那只是运气问题。

正如您似乎通过“中断浏览器以使最终用户能够按预期查看页面的能力”来定义危险的那样，那么是的，这很危险。

浏览器正在尽最大努力弥补无效标记，但不能保证您的页面完全正确显示。

您说验证是您最不关心的问题，请重新考虑并查看Why Validate？. 如果您关心您的页面是否正确显示且没有任何问题，请进行验证。

最后，HTML Tidy可以帮助您修复现有的 html。

编辑：我将您的片段提交给 browsershots.org 以查看它是如何被不同的浏览器呈现的。

于 2010-01-09T00:24:44.887 回答
13

使用像您的示例这样的无效标记可能会导致不同页面出现意外行为。如果您使用有效的标记，浏览器将（或应该）根据规范显示您的内容。但是，如果您使用无效标记，浏览器将尝试解释标记并显示页面它认为您的意思。有时他们会以您想要的方式显示它，有时则不会。这是 Mac 上 Firefox 3.5 的示例。

替代文字

第一个列表是您的代码，但使用正确的<ul>标签替换<div>标签。第二个列表正是您的代码。请注意，第二个列表缺少左侧的默认边距和项目符号。

基本上，如果你使用这样的无效标记，什么都不会死，但这是非常糟糕的做法，因为它会导致意外和不一致的结果。

于 2010-01-09T00:32:54.370 回答
5

<td>这与在内部使用标签相同<p>。当然，它可能会在某些浏览器上以某种方式工作，但它肯定会被破坏。这种构造的行为是未定义的，无法保证它在不同浏览器上的工作方式。更不用说可访问性，屏幕阅读器程序会对这种结构感到非常困惑。

为什么不能使用正确的<ul>或<ol>标签？它的样式和处理方式与<div>.

于 2010-01-09T00:25:27.987 回答
2

我不明白为什么它不能正确显示，虽然它并不意味着它自己存在，但它会渲染得很好。

你可能应该把它放在你正在使用的标记没有任何好处而不是不正确地做<ul>它。

于 2010-01-09T00:28:48.823 回答
2

这在一定程度上呼应了其他所有人的回答：对于任何标记，都有一个经验问题，即它是否在您正在测试它的浏览器上有效。您在所有浏览器上都对其进行了测试，并且很高兴。这很酷，是工作的重要组成部分。

但除此之外，还有一个假设性问题，即它在您尚未测试的浏览器平台组合上的效果如何，或者是因为：

  1. 您没有将它们包含在测试集中
  2. 它们还不存在或
  3. 它们不可用于测试（例如网络爬虫）

对于这个迟早总是相关的集合，您应该遵循标准——如果可能的话——并使用封闭的 UL 或 OL 标签（在这种情况下）。

还值得一提的是，如果您正在编写脚本，或者如果有人在您的页面上编写脚本（例如 Greasemonkey），它可以更容易地跟踪 LI 标记。

于 2010-01-09T00:39:29.100 回答
1

作为一名网页设计师/开发人员，当您开始编写连 Frontpage 或 Microsoft Word 都不会生成的 HTML 时，您知道自己已经走得太远了。

坚持标准是一条两条路。如果我们希望浏览器开发人员创建快速、可靠和一致的渲染引擎，我们需要通过创建一致、干净和格式良好的 HTML 来满足他们的要求。

于 2010-01-09T00:32:41.577 回答
0

由浏览器的实现来决定如何处理它。如果您真的想这样做，请在使用之前在您想要支持的所有浏览器中进行测试。

另请注意，浏览器的行为将来可能会发生变化。

于 2010-01-09T00:25:57.037 回答
0

危险的？它不会炸毁任何东西。如果布局对您很重要，则可能会导致问题。

您只是不知道浏览器将如何呈现它。

于 2010-01-09T00:26:10.500 回答
0

我真的无法想象为什么你不想把<ul>or<ol>标签放进去，它们定义了列表。然后，您可以控制列表的显示方式，而不是将其留给浏览器来决定，这很重要。错过它们只是编写无效的标记，是的，它可以在某些浏览器中工作，但 id 肯定会保留它们。

于 2010-01-09T00:27:42.973 回答
0

大多数浏览器可能会采用它并运行它，但有两种不同的列表类型可用：无序 <ul> 和有序列表 <ol>，其中有序列表的每个项目都有数字。

您可以不使用 <li> 标记，而是使用“•”项目符号字符 (•)，然后在每行末尾使用 <br />。

于 2010-01-09T00:29:32.753 回答
0

我不会依赖未指明的行为。只需替换它<div>并<ul>使用 CSS 对其进行样式设置。

于 2010-01-09T00:29:38.493 回答