Internet Explorer not incrementing number for non-sibling <li> elements

I've got some html that looks like this:

<ol>
  <div>
    <li>one</li&g开发者_Python百科t;
  </div>
  <div>
    <li>two</li>
  </div>
  <div>
    <li>three</li>
  </div>
</ol>

Which looks like this in Chrome/Firefox:

1. one
2. two
3. three

But looks like this in IE:

1. one
1. two
1. three

If I change the code so that the li element is the parent of the div element instead of the other way around (so that all the li elements are siblings) IE renders it correctly. Anyone know what causes this or if this is the intended working behavior of IE? Furthermore is one way technically more correct than the other?

<div><li></li></div> VS. <li><div></div></li>

---

Quite simply, <div> directly inside <ol> is not valid, so the secons option is better.

The specifications are clear here, <ul> and <ol> can only have <li> elements. It is best to write HTML that follows the standard - when you don't, browsers are more likely behave unexpectedly.

---

Your HTML is not valid. First of all the number that appears is default presentation from the browser, but is not a functional convention of HTML. Secondly, validate your code and the problem will be self explanatory.

---

Surrounding a LI tag with anything is incorrect. UL and OL can only contain LI tags. LI tags can contain anything.

http://www.w3.org/TR/1999/REC-html401-19991224/struct/lists.html

---

Simple...There are some priorities to be given to tags. also, " or

" tags can not be act as container tags. so it should never keep the entire structure.