當圖像漂浮在左邊時，在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 */ 
}