2012-12-21 103 views
0

我有一個列表正確顯示在Chrome,Firefox和Opera的最新版本中,但在IE 8,9和10版本中,在<div>的編號和文本之間有一個非常大的空格。格式化IE的有序列表

我該如何修復? list-style-position必須是inside,因爲我需要在數字和文本下的背景圖片。絕對定位不是很好的解決方案,因爲文字可以很長。

<style> 
    ol { 
    list-style-position: inside; 
    background-color: silver; 
    font-size: 180%; 
    padding: 0px; 
    } 
    li { 
    border: solid 1px; 
    } 
    div { 
    font-size: 50%; 
    display: inline-block; 
    } 
</style> 

<ol> 
     <li><div>aaa</div></li> 
     <li><div>bbb</div></li> 
</ol> 
+0

可能是這個鏈接可以幫助您 http://stackoverflow.com/questions/3607883/ordered-list-and-ie –

回答

0

寫在你的身體標記

  <!--[if IE]> 
     <style> 
       ol { 
       list-style-position: inside; 
       background-color: silver; 
       font-size: 180%; 
       margin-left:-0.5%; 
       } 
       li { 
       border: solid 1px; 
       position:relative; 
       } 
       div { 
       font-size: 50%; 
       display: inline-block; 
       position:absolute; 
       padding-top: 8%; 
       padding-left: 12%; 
       } 


     </style> 
      <![endif]--> 
+1

IE 10沒有按不支持有條件的評論。 – user1921267