logo标签列表

有没有一个HTML元素在渲染时被忽略了？

html
6
我有这个标记。
<html>
... some HTML ...

我需要将它包装在一个像这样的元素中:

<html>
<div class="user-content">
   ... some HTML ...
</div>

问题在于，...一些HTML... 可以是从纯文本到复杂标记的各种不同形式。

<div>

如果我使用 <div>，那么它会添加一个块级断点。这意味着如果我有

Paul is cool

现在我拥有
<div class="user-content">
   Paul is cool
</div>

强制换行的方式是使用 <br> 标签。

<span>

如果我使用 <span>，当 <span> 包含一个 <div> 时，奇怪的事情开始发生。例如，<span> 的宽度显示为0像素，这会使 javascript 对该节点不太满意。

是否有更好的标签可供使用？

一些背景

长话短说，我需要在 HTML 中存在该节点，因为我正在运行不受信任的 javascript，并且我不希望 javascript 能够进入该节点内部。为了实现这一点，我们对所有 DOM 函数进行了沙盒化，并在每个 DOM 调用时检查是否在“用户内容”节点上操作，如果我们正在访问那里或其任何子节点，则不允许访问。

5个回答
8
如果你使用div时唯一的问题是换行符，那么为什么不给它添加这个样式：display: inline;？
如果你能更具体地描述你的问题...为什么你非得用它来包装呢？
基本上，div 就是你想要的，只需要适当地设置样式即可。
完美的答案。稍微扩展一下，您还可以使用其他块级标签，只要确保设置CSS规则为display:inline。因此，如果例如标题、页脚、文章或部分标签比div更具语义适用性，请随意使用它们。 - Moses
1
那么添加"display:inline"并不会使它成为一个内联元素（这意味着它仍然可以有块级子元素）？我应该使用其他CSS属性吗？我希望它的渲染效果就像它在DOM中并不存在一样。 - Paul Tarjan
保罗，我相信规则是内联元素不能有块级子元素——当然可以有子元素。 - rfunduk
我编辑了这个问题。我们不希望JavaScript能够进入这些元素。 - Paul Tarjan
"display: inline" 正是使元素成为内联元素的属性，所以这不是你要找的东西。但基于你更新后的回答，如果你问我的话，这根本不是正确的方法。我认为将不受信任的用户内容放置在 iframe 中可能会更好些。 - rfunduk
显示剩余3条评论
0
你说你有一个包含 div 的 span。块级元素不应该被包含在内联元素中。但是，你可以在 div 中使用 span 元素。
0

<span> 是最接近这种元素的东西，你提到的奇怪行为是正常的，<span> 是内联元素，而 <div> 是块级元素。你不能在内联元素中放置块级元素。（我想显示类型（行内/块级）是 span 和 div 之间唯一的区别）

0
如果IE和Opera Mobile不重要，最简单的方法是使用带有样式display:contents的div。
0

最终我不得不解析内容，决定使用 <span> 还是 <div>。虽然不完美，但它能够正常工作。

以下是我的内联元素列表，希望对大家有所帮助。

    if (starts_with($html, '<') &&
        !starts_with($html, '<a ') &&
        !starts_with($html, '<input ') &&
        !starts_with($html, '<iframe ') &&
        !starts_with($html, '<img ') &&
        !starts_with($html, '<span ') &&
        !starts_with($html, '<script ') &&
        !starts_with($html, '<input>') &&
        !starts_with($html, '<span>') &&
        !starts_with($html, '<script>')) {
如有用处，这里是一个几乎官方的 HTML 4 块级元素完整列表（http://htmlhelp.com/reference/html40/block.html），这样您就不必猜测并且事后发现漏了一些。 - hippietrail
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接