帶列表樣式位置的列表項上的意外間距：Internet Explorer中的內部

http://krill.larvit.se/resihop_dev/右列有序列表。帶列表樣式位置的列表項上的意外間距：Internet Explorer中的內部

HTML：

<ol class="instructions"> 
    <li> 
    <p>För att hitta samåkningar, klicka på kartan på platsen du vill åka ifrån.</p> 
    </li> 
</ol>

我認爲這是相關的CSS：

.instructions{ 
    padding-left: 0; 
} 
.instructions li{ 
    padding: 0 10px; 
    margin: 0 0 10px 0; 
    list-style-position: inside; 
    font-size: 25px; 
} 

.instructions li p{ 
    font-size: 12px; 
    display: inline-block; 
    vertical-align: middle; 
    width: 360px; 
}

在Internet Explorer 9，大空間上的「1」的右側添加。我能做些什麼呢？如果可能的話，我想保留html標記。

來源

2012-08-13 Himmators

不同的瀏覽器渲染略有不同，但我會親自執行以下操作：

.instructions li{ 
    padding: 0; 
    margin: 0 0 10px 30px; 
    font-size: 25px; 
}

將顯示在所有瀏覽器相當接近，如果你想讓它更接近你需要要麼使的字體大小1.較小或添加-XXpx的左端緣至段落

.instructions li p{ 
    font-size: 12px; 
    display: inline-block; 
    vertical-align: middle; 
    width: 360px; 
    margin-left:-8px; 
}

另一種方法是爲具有數字作爲一個CSS子畫面+背景圖像上的李。

來源

2012-08-13 16:01:13

我沒有提到它，所以你的回答是公平的，但我在我的li：s上使用border + background-color。 – Himmators 2012-08-13 18:18:15

你是否爲此做出了決定？只是有一個想法，你可以使用多個背景圖片，但IE8和更低版本不支持。 – 2012-08-15 08:48:38

我會從<li>標籤內取出<p>標記作爲一個列表條目，你不需要它，（你所做的是增加了一段列表條目）你然後就風格的<ol>標籤和<li>標籤

來源

2012-11-01 23:53:25 simon

注意到OP如何說：*「如果可能，我想保留html標記。」* – madth3 2012-11-02 00:18:26

帶列表樣式位置的列表項上的意外間距：Internet Explorer中的內部

回答

相關問題