水平線內嵌塊IE7

我想在連續放3條水平線。有誰知道如何把水平線顯示在IE7中的內嵌塊？水平線內嵌塊IE7

這裏是我的CSS：

hr.small { 
    width: 28.9%; 
    margin-right: 6px; 
    display: inline-block; 
    vertical-align: top; 
    zoom: 1; 
    *display: inline; 
    height: 3px; 
    border: 0px; 
    color: #7c8690; 
    background-color: #7c8690; 
}

但它不工作。

這裏是的jsfiddle鏈接：http://jsfiddle.net/sRuz3/6/

如果任何人有一個解決方案。

非常感謝。

來源

2012-08-23 fliim

這有什麼好處？ http://jsfiddle.net/R49YG/1/ –

也不適用。 – fliim

http://jsfiddle.net/sRuz3/5/ – Jawad

在這裏你去：http://jsfiddle.net/eq3Z2/

它工作在IE7也。

當然，他們不是HR。他們是DIV。試圖將HR作爲內聯元素正在絆倒IE7，但我不知道解決方法。

來源

2012-08-23 23:27:18 Cynthia

謝謝！效果不錯 – fliim

高興地幫助:) – Cynthia

是否必須內聯塊？你能不能簡單地漂浮它們並在必要時設置高度？

編輯 - 例如：

hr.small { 

    float:left; 
    width: 28.9%; 
    margin-right: 6px; /* Choice: Use border instead or halve the margin for IE7 and lowwer (double margin float bug). */ 
    height: 3px; 
    background-color: #7c8690; 

}

再次編輯 - 問：

這是將在流動佈局和有多大的容器？您正在設置一個動態寬度但是具有固定邊距，這會導致小規模問題，並且會在最大範圍內向最右側引入不需要的空白區域。如果它是一個固定的區域，則考慮使用固定的寬度。

來源

2012-08-23 22:19:23 JohnDevelops

我沒有嘗試將它們置於浮動狀態，但我想先查找是否有更簡單的方法。 – fliim

Dosnt比浮動我的朋友容易得多:) 它是相當可靠的跨瀏覽器，並且通常做你所要求的，只要有一點經驗。以示例更新我的答案。 – JohnDevelops

hr的佈局是固定的，我在它們上應用一個固定寬度。感謝您的建議。左邊的浮動似乎不起作用：/ – fliim

似乎有一個解決方案，如果你可以將hr s包裝在div s。

設置div的到display:inline（我們可以使用span！而非但hr s爲不span S適用）¹，並通過zoom:1

給div小號的hasLayout見http://jsfiddle.net/YqKDJ/1/

¹順便說一句，hr s在span s中無效並且與此處相關的原因是有原因的。一個hr主要不是繪製水平線的方式 - 它具有「主題突破」的特定語義。沒有內容的兩個或兩個以上元素沒有任何意義 - 第二個專題突破沒有任何突破。如果你想要多個水平線用於表示目的，你應該使用CSS創建它們，沿着@Cynthia的答案。

來源

2012-08-23 23:41:54 Alohci

水平線內嵌塊IE7

回答

相關問題