在IE上使用最小寬度的內聯跨度

嗨
我有3 SPAN必須是inline並且有和min-width。
顯然在IE上，SPAN不能有min-width。我嘗試使用DIV，但是當我把它放在inline時，min-width被忽略。在IE上使用最小寬度的內聯跨度

CSS

span { 
    display: inline; 
    min-width: 150px; 
}

HTML

<span>1</span> 
<span>2</span> 
<span>3</span>

2012-02-14 Snote

inline

元件不能採取width，height，vertical margin & padding。所以，你必須定義display:inline-block;這樣寫：

span { 
    display: inline-block; 
    *display: inline;/* for IE7*/ 
    *zoom:1;/* for IE7*/ 
    min-width: 150px; 
}

的 'width' 屬性不適用。 'margin-left'或'margin-right'的計算值'auto'成爲使用值'0'。

2012-02-14 09:58:07 sandeep

在Firefox中工作，但在IE中。 – Snote 2012-02-14 10:03:28

檢查此http://jsfiddle.net/yCvhB/不工作 – sandeep 2012-02-14 10:06:29

+1 - 編輯適合我。我看到'zoom：1'對IE7/IE8產生'inline-block'效果，這是我不知道的。你介意在你的回答中加入如何工作嗎？ – 2012-02-14 10:32:12

你可以使用填充。
由於您將元素內聯，因此沒有指定最小寬度的點。

2012-02-14 09:57:33 xdevel

在span中添加文本在ajax中添加。所有的文字都沒有相同的大小，所以我想要一個最小重量。大多數情況下，文本會比範圍小，並且顯示會相同，但是某些內容可能會更長。 – Snote 2012-02-14 10:06:57

那麼..然後我想你需要使用float：left;使顯示屬性爲「block」，然後清除浮動。
血腥的IE吃所有的開發者時間..！ – xdevel 2012-02-14 10:13:39

+1爲填充的想法，這幫助我一個contenteditable，否則將有零點區域點擊。 – 2015-04-28 22:32:14

立足我的回答對sandeep's answer，您可以使用

span { 
    display: inline-block; 
    *display: inline; 
    *zoom:1; 
    width: auto !important; 
    width 150px; 
    min-width: 150px; 
}

，它應該工作。看看這個的jsfiddle：http://jsfiddle.net/ramsesoriginal/yCvhB/2/

Internet Explorer有一些問題，最小的寬度和高度，但同時它與!important問題，所以利用這樣（和事實，即沒有指定溢出的每一個的是一個最小寬度對於IE），我們可以有一些工作。

2012-02-14 10:31:08 ramsesoriginal

回答