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

Question

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

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

在Internet Explorer上查看此JSFIDDLE以查看问题。我在Internet Explorer 10和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>

Answer 1

尝试这个：

JSFiddle - DEMO

ol {
    list-style-position: inside;
}

Answer 2

JS Fiddle

为float:left添加了ol，问题将得到修复并移除padding

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

编辑

Js Fiddle

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