Have Geek Brain

Internet Explorer does not increase the number of non-<li> elements

I have html that looks like this:

<ol>
  <div>
    <li>one</li>
  </div>
  <div>
    <li>two</li>
  </div>
  <div>
    <li>three</li>
  </div>
</ol>

What looks like in Chrome / Firefox:

1. one
2. two
3. three

But it 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 and not the other way around (so that all li elements are siblings) IE renders it correctly. Does anyone know what is causing this, or if this is IE's intended working behavior? Also, is one method technically more correct than the other?

<div><li></li></div> VS. <li><div></div></li>
+2


a source to share


4 answers


Simply put, <div>

directly inside is <ol>

invalid, so the secons option is better.



specifications are here, <ul>

and <ol>

can only have items <li>

. Your best bet is to write HTML that follows the standard - when it doesn't, browsers are likely to behave unexpectedly.

+4


a source


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



0


a source


Incorrect environment for the LI tag. 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

0


a source


Simple ... There are several priorities that need to be set for tags. Additionally, the tags "or

"cannot act like container tags. so it should never retain the entire structure.
0


a source






More articles:


All Articles