html - 在我的 LI 中，为什么溢出的 bg 颜色与其余部分的 bg 颜色不同？

Question

我在有序列表中显示代码，以便它显示行号。每个 li 都有一个 pre 标签，其中填充了一行代码。

我的问题是，当我设置 ol 的宽度并允许溢出滚动时，溢出的背景颜色与最初显示区域的背景颜色不同。

ol 的背景颜色必须与 li 的背景颜色不同，以使行号突出显示。

我的 CSS 有问题吗，为什么会这样？如何为行号和代码设置滚动条和不同的背景颜色？

HTML:

<ol class="code">
  <li>
    <pre>Hello World! This is a long line that you have to scroll to see.</pre>
  </li>
  <li>
    <pre>This is the second line that you have to scroll to see.</pre>
  </li>
</ol>

CSS:

  ol {
    width:200px;
    background-color:#CFCFCF; }

  pre {
    color:#FFF;
    background-color:#000; }

  .code {
    overflow:scroll; }

Example page

问题:

Answer 1

这是正确的行为。这是因为当文本溢出元素(在本例中为 pre)时，框不会随之增长。