title: Why does this simple negative text-indent on list items works in all browsers except IE8?
body: <h1>CSS</h1>
  
  <p>I have some simple CSS to apply a negative <code>text-indent</code> value on the <code>li</code> in an <code>ul</code>:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      ul.indent li { text-indent: -20px; padding-left: 20px; }
  &lt;/style&gt;
  
  &lt;!--[if lte IE 8 ]&gt;
  &lt;style type="text/css"&gt;
      ul.indent li { text-indent: -20px; padding-left: 0; margin-left: 20px; }
  &lt;/style&gt;
  &lt;![endif]--&gt;
  </code></pre>
  
  <p>Since Internet Explorer 8 and lower deal with list item margins and padding differently than modern browsers, I'm using a conditional comment for IE8 and below to apply different padding and margin values. (Side note: If anyone knows of a universal, cross-browser CSS solution to get consistent margins/padding without using conditional comments, I'm all ears. I need to support IE6 and up, Chrome, Firefox, Safari, and Opera.)</p>
  
  <h1>HTML</h1>
  
  <p>This is my HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Lorem ipsum...&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul class="indent"&gt;
      &lt;li&gt;Lorem ipsum...&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The first list is completely unstyled (as a control for the experiment), and the second list uses the CSS class defined above (<code>class="indent"</code>).</p>
  
  <h1>The result</h1>
  
  <p>Here's the problem: The HTML/CSS above produces a consistent result <strong>in every browser except IE8</strong>. This is what I'm seeing in the browsers:</p>
  
  <p><img src="https://i.stack.imgur.com/IvCJx.png" alt="All browsers vs. IE8"></p>
  
  <p>I see what's on the left side in IE6, IE7, IE9, Chrome, Firefox, Safari, and Opera.</p>
  
  <p>I see what's on the right side in IE8. Notice the area highlighted in red. As soon as a negative text-indent value is added to the CSS, IE8 seems to throw a bunch of extra pixels between the list item bullet and the list item text.</p>
  
  <p>How can I prevent IE8 from adding those extra pixels?</p>
  
  <p>You can see the code in action here: <a href="http://jsfiddle.net/Kxb8v/" rel="nofollow noreferrer">http://jsfiddle.net/Kxb8v/</a></p>