在Firefox或IE中span無法確定寬度的解決方案_HTML/Xhtml_網頁製作

複製程式碼

程式碼如下:

fixed width span

透過試驗以後發現，無效，無論是在Firefox或IE中都無效。

透過查閱 CSS2標準中關於width 的定義發現，原來CSS中的 width 屬性並不總是有效的，如果對像是 inline 對象，width 屬性就會被忽略。 Firefox 和 IE 原來是遵循了標準才這麼做的。

修改span 為block 類型並設定float 不是完美解決

在span的CSS中增加display屬性，將span設定為block類型的Element，這樣寬度的確有效了，不過也把前後文字隔在不同行裡面。這樣其實span就完全變成div了。

複製程式碼

程式碼如下:

span {background-color: background-color; display:block; width:150px;}

很多人會建議再增加一個CSS 屬性float ，這樣的確在某種條件下能解決問題。例如我們的例子中，如果span前面沒有文字，那的確是可行的。但如果有了，前後文字就會連在一起，而span跑到了第二行。

複製程式碼

程式碼如下:

span {background-color: background-color;
display:block; float:left; width:150px;}

設定span 寬度的完美解決方案

設定span 寬度的完美解決方案

以下程式碼的CSS定義解決了span的寬度設定問題。由於瀏覽器通常對不支援的CSS屬性採取忽略處理的態度，所以最好將display:inline -block行寫在後面，這樣在Firefox裡面，如果到了未來的Firefox 3，這一行就能起作用，程式碼可同時相容各種版本。

複製代碼

代碼如下:


/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">






fixed width span