Question

我遇到以下HTML问题：

<html>
  <body>
    <p style="font-size: large"> 
        Some paragraph text 
        <span><pre style="display:inline">some span text</pre></span> 
        additional paragraph text that continues ...
    </p>

  </body>
</html>

所以这只是一个段落，其中包含一些预先格式化的文本。我遇到的问题是Opera和Chrome都没有像我期望的那样显示。具体来说，他们在跨度之前关闭段落标记并强制换行。 WTH？！

使用chromes HTML检查选项，它会显示正在关闭代码并插入空而不是封闭<pre>。如果删除了范围，则Chrome仍会关闭标记，从而强制换行。

我需要显示以下标记结构，而不强制使用任何换行符<pre><code></code></pre>。这是完全可能还是有其他选择或解决方法？

编辑：我被锁定为<pre>标签，因为它是wordpress的语法高亮插件的一部分。

注意：我认为这里最好的建议是验证您的HTML。我遇到的很多问题是因为某些浏览器正在优雅地处理无效的HTML而其他浏览器并不优雅。验证意味着您可以使用干净的石板。

Answer 1

完全删除pre标记，然后只提供span style="white-space:pre"。有关其他white-space选项的说明，请参阅this page。

<pre>基本上是在说<div style="white-space:pre">;你想要的是。

Answer 2

段落标记不能包含块级元素：

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

pre是块级元素。

如果您希望在内联元素中使用white-space: pre行为，则可以在跨度上设置CSS样式pre。

Answer 3

pre是一个块级元素，如果内存正确，则不允许在span内。

您可以通过验证HTML来找到答案。

<pre> tag making browsers close paragraphs</pre>

3 个答案: