How do I make a border-left display outside the list marker in IE8?

I have an ordered list that I want to put a border on the left.

<ol class="steps">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
<ol>

.steps {border-left: 5px double #7ab800;}

In Firefox and Safari, the border displays outside the numbers for the <ol>. However, IE8 displays the border inside the numbers, right next to the text for each <li>.

I tried changing <display> to inline-block but that removes the numbering. I tried changing list-style-position to inside but that changes the indentation of the list without moving the position of the border. There are no floats involved. There is a <div> wrapping the <ol> but 开发者_运维问答it is not styled in any way.

I'm stumped. How can I get IE8 to display the border the same as Firefox and Safari?

Try putting a div tag around your list and apply your class to the div instead.