IEでolタグを利用したところ「１」しか表示されない。

Question

IEとEdgeブラウザーで<ol>タグを利用したところ、全てのリストで1しか表示されないというバグが起こりました。

解決策をネットで探して、CSSで以下のように記述すればよいとありました。

* { zoom: 1; }
ul, ol, li { zoom: normal; }

しかし、これを行っても結果は変わりませんでした。
以下が私の書いているHTMLを簡略化したものになります。
CSSフレームワークとしてBootstrapを使っています。

<ol>
 <div>
  <li><a href="">text</a></li>
  <p>text</p>
 </div>
 <div>
  <li><a href="">text</a></li>
  <p>text</p>
  </div>
 <div>
  <li><a href="">text</a></li>
  <p>text</p>
 </div>
</ol>

IEとEdge以外では、普通にリストが番号順に表示されます。
解決策が見つけられずに非常に困っております。

解決策を教えていただければ大変うれしいです。

Answer 1

そもそも、ol要素の直下の要素(子要素)には、li要素、script要素、template要素しか指定できません。

4.4.5 The ol element - HTML Standard

Content model:
Zero or more li and script-supporting elements.

訳：0個以上の、li要素とscript-supporting要素。

4.4.5 The ol element — HTML5

Content model:
Zero or more li and script-supporting elements.

訳：0個以上の、li要素とscript-supporting要素。

<ol>: 順序付きリスト要素 - HTML | MDN

許可されている内容
0個以上の <li> 要素。さらに <ol> または <ul> 要素を入れ子で包含することがあります。

HTMLの仕様を策定しているグループ「W3C」公式のHTMLバリデータ(HTML構造の正当性を検証するツール)でも、このマークアップではエラーとなります。

The W3C Markup Validation Service

簡単に言うと、ol要素の子要素としてdiv要素を指定している現在のマークアップそのものが、つまり、HTMLのほうが誤っています。
IEとEdge以外では正常に表示されているとしても、それは「たまたま」正常に表示されただけであって、そのWebブラウザのエンジンが非常に親切だったというだけのこと。
テストされていない未知のブラウザ等でも似たような、あるいはもっとひどい現象が起こりえますし、そうなったとしてもHTML側が間違っているため、ブラウザのバグとは言えません。

coba-cobaさんの解答のような修正を行う必要があります。

Answer 2

これではだめですか？

<ol>
  <li><div><a href="">text</a><p>text</p></div></li>
  <li><div><a href="">text</a><p>text</p></div></li>
  <li><div><a href="">text</a><p>text</p></div></li>
</ol>