Html 当图像向左浮动时，在IE中列出问题

我有一个带有文本的项目列表和一个浮动到左侧的图像。我希望列表中的文本环绕图像，这就是为什么我在图像上使用float left

它在Firefox和Chrome中工作正常，但在Internet Explorer上，列表中的项目符号或数字不会出现在文本旁边，而是出现在行的开头，在图像上方

在Internet Explorer上检查此项以查看问题。我在InternetExplorer10和9上测试它

标准html代码如下所示：

<img src="img_src" style="float:left">
<ol>
    <li>Lorem ipsum dolor sit amet, vidit reque dicam vel in, eum dolore disputando et. Stet paulo no qui, mazim eirmod gloriatur vim te, nec commune intellegam id. Cu vis epicuri placerat, tractatos pertinacia vel ad, adipisci moderatius interpretaris nam ex. Per option minimum convenire cu, cum diam falli cu.</li>
    <li>Lorem ipsum dolor sit amet, vidit reque dicam vel in, eum dolore disputando et. Stet paulo no qui, mazim eirmod gloriatur vim te, nec commune intellegam id. Cu vis epicuri placerat, tractatos pertinacia vel ad, adipisci moderatius interpretaris nam ex. Per option minimum convenire cu, cum diam falli cu.</li>
</ol>

我的观点是：我的观点是正确的，我的观点是正确的，我的观点是正确的，我的观点是正确的，我的观点是正确的，我的观点是正确的，我的观点是正确的
我的观点是：我的观点是正确的，我的观点是正确的，我的观点是正确的，我的观点是正确的，我的观点是正确的，我的观点是正确的，我的观点是正确的

为

ol

添加了

float:left

，该问题将被修复并删除

padding

ol {
    margin-left: 20px;
    float:left;
}

编辑

试试这个：

JSFiddle-

---

请尝试添加更多文本以查看发生了什么。。。列表将放在图片下面。你检查我的答案了吗？

ol {
    padding-left: 30px; /* changed margin to padding */
    display: table-cell; /* added */
}

ol {
    list-style-position: inside;
}