CSS 代码样式 - 空行缺少背景颜色

Question

我希望这很简单。我不是 CSS 人。

我正在尝试让博客上的一些代码看起来更好一些，并且我有以下<code> CSS 样式。

code {
        display: block;
        white-space:normal;
        background-color: #eeeeee;
        font: 1em, 'Courier New', Courier, Fixed;
        padding: 7px;
        margin: 7px 7px 7px 7px;
    }

这对我来说很好，除了我的<code> 标记中包含的代码中有换行符，背景颜色是白色而不是浅灰色。

我可以做一个 CSS 调整来强制我的整个 <code> 块的背景颜色为灰色吗？

谢谢。

评论：如果我在空行上放一个空格，我会得到我想要的 - 该行上的灰色背景。

评论2：我的<code> </code> 标签内只有纯文本。理想情况下，我不想用标签标记我的代码。只需在<code> 标签内剪切和粘贴，让它看起来不错。

最终评论：在阅读了下面墨卡托建议的this 之后，我终于同意了。我将<pre> 标记子类化并得到了我需要的东西。一个很好的阴影框来抵消我的示例代码块。

 pre.code {
    color: black;
    border: solid 1px #eeeeee;
font-size: 1.1 em; 
margin: 7px; 
padding: 7px; 
background: #eeeeee
 }

Answer 1

这对我来说似乎工作得很好，但是我不知道你的 <code> 标记的内容是什么。

无论如何，您的 CSS 中都有一些奇怪之处：

• 我可能不会使用display: block，而是将标签包裹在<p> 或<pre> 中。将其更改为这样的块仍然不允许您在其中嵌套块级标签，并且它仍然需要位于块级标签本身内。 CSS 不会改变 HTML 语法和语义。您的代码标签中是否有任何块级标签？
• 为什么设置white-space: normal？这对于代码块来说有点不寻常。你究竟是如何格式化你的代码的？您是否在其中添加<p> 或<br> 标签？为什么不使用white-space: pre，或者white-space: pre-wrap？
• 您的font 声明已损坏。 1em 和字体名称之间不应有逗号。浏览器现在会简单地解析它，好像1em 是字体系列的名称，我认为，然后回退到Courier New，因为1em 不存在。
• 我想你的意思是说monospace 而不是Fixed。还是Fixed 是字体的实际名称？无论如何，您最好添加通用的monospace。
• 更多的是挑剔：您也可以将这 4 个边距折叠为一个值。

我不确定这些是否真的是您的问题的原因。前两个是最有可能的候选人。在我做的快速测试中没有发生什么奇怪的事情，但是你的一些 other CSS 可能会结合这些点产生问题。

啊，等一下……我现在知道您是在说“博客上的某些代码看起来更好一点”。博客软件会自动在由空行分隔的文本块周围添加段落标签。那些是白人的罪魁祸首。

我想这也是您添加white-space: normal 的原因。博客软件已经自动添加换行符和所有内容（带有<p> 和<br> 标签），所以使用pre 增加了一大堆额外的空间。

尝试像 StackOverflow 那样使用<pre><code> 标签组合。使用<pre> 标签可能（希望）可以防止博客软件弄乱你的代码。

对于 WordPress，请查看他们的文章“Writing Code in Your Posts”。

Answer 2

尝试设置明确的宽度。不知道为什么会这样。我有时会在测试时添加边框以查看我的盒子在哪里以及它的外观。我知道您可以使用诸如 firebug 之类的网络调试器来做到这一点，有时它更简单，甚至可能有副作用。

添加：

width: 100%;
border: 1px solid #eee;

看看是否有帮助，也许将边框颜色更改为 #000 以查看边界在哪里。

Answer 3

如果没有一些 HTML 和/或测试页面，就很难知道是什么导致了问题。不过，我会查看 line-height 属性 - 它经常会导致这类问题。