前标签显示代码 [英] Pre tag to display code

问题描述

我无耻地从SO的< pre> 标签偷了一些CSS，为了在我的网站有这样的事情。但是， background-color 属性似乎不工作：背景仍然是白色的。如何解决此问题？

I shamelessly stole some CSS from SO's <pre> tag, in order to have that kind of thing in my site. However, the background-color attribute doesn't seem to work: the background is still white. How do I get around this?

我的CSS：

    pre.code, code {
        font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif;
        background-color: #eee;
    }
    pre.code {
        overflow: auto;
        font-size: 13px;
        padding: 5px;
        width: auto;
        width: 650px !ie7;
        padding-bottom: 20px !ie7;
        max-height: 600px;
        margin-bottom: 1em;
        display: block;
        color: #393318;
        white-space: pre;
    }

HTML：

<code>inline code</code>
<pre class="code">block code</pre>

推荐答案

尝试在背景颜色规则之后添加！

Try adding !important after the background color rules.

background-color: #eee !important;

这将告诉webbrowser这个着色会覆盖任何其他可能试图着色的css规则。

This will tell the webbrowser that this coloring overrides any other css rules that may be trying to color it.

编辑：

如Lister所说，！important只能用于帮助调试问题的css。一旦你跟踪了问题，你应该修复坏的CSS。

As Lister said, !important should only be used to help with debugging issues the css. Once you have tracked down the issue, you should fix the offending css.

这篇关于前标签显示代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！