title: In CSS, When I scroll the scroll bar, the background-color of <li> disappeared
body: <p>HTML code like this:</p>
  
  <pre><code>&lt;div&gt;
      &lt;ol&gt;
          &lt;li class='a'&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/li&gt;
          &lt;li class='b'&gt;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code like this: </p>
  
  <pre><code>div {
      width: 400px;
      overflow-x: scroll
  }
  
  .a {
      background-color: red;
  }
  
  .b {
      background-color: blue;
  }
  </code></pre>
  
  <p>When I scroll the scroll bar, I see that the background color is only applied to the original unscrolled region. How can I solve this problem.</p>
  
  <p><a href="http://jsfiddle.net/unimous/VMZ87/" rel="nofollow">My Code is Here</a></p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p><strong><a href="http://jsfiddle.net/unimous/VMZ87/3/" rel="nofollow">Another example showing my problem clearly.</a></strong></p>
  
  <p><strong>I have a second problem now: the second line disappeared...why</strong></p>