原文參考自：http://wenku.baidu.com/view/3fec69d6240c844769eaee8a.html
CSS中如何把中如何把中如何把中如何把Span標簽設置為固定寬度標簽設置為固定寬度標簽設置為固定寬度標簽設置為固定寬度 SPAN標簽相信對一般的網頁設計師來講是非常熟悉的朋友了，使用相當頻繁，但我們往往很少對SPAN設定樣式，一般也沒什么必要，大多數都留給DIV老朋友了。 今天在實現一個效果中加入了SPAN，因為是用來實現放塊效果，所以給它定義了固定寬度，本以為胸有成竹的事，可執行網頁時發現設定的寬度沒有效果，讓我郁悶了幾分鍾，看似很簡單的樣式定義盡然是無效 后來網上搜索了相關資料，是怎么解釋的： CSS中的width屬性並不總是有效的，如果對象是inline對象，width屬性就會被忽略。Firefox和IE原來是遵循了標准才這樣做的。 原因知道后，解決方案也就出來了，如下代碼所示： 一一一一、、、、形如形如形如形如<span>ABC</span>獨立行設置獨立行設置獨立行設置獨立行設置SPAN為固定寬度方法如下為固定寬度方法如下為固定寬度方法如下為固定寬度方法如下：：：： span {width:60px; text-align:center; display:block; } 實際驗證結果：IE6 OK， FIREFOX 3 OK。 一一一一、、、、形如形如形如形如<span>ABC</span>DEF格式行設置格式行設置格式行設置格式行設置SPAN為固定寬度的方法如下為固定寬度的方法如下為固定寬度的方法如下為固定寬度的方法如下：：：： span {width:60px; text-align:center; display:block; float:left;} 實際驗證結果：IE6 OK， FIREFOX 3 OK。 二二二二、、、、形如形如形如形如ABC<span>DEF</span>GH格式行設置格式行設置格式行設置格式行設置SPAN為固定寬度的方法如下為固定寬度的方法如下為固定寬度的方法如下為固定寬度的方法如下：：：： span {width:60px; text-align:center; display:inline-block;} 實際驗證結果：IE6 OK， FIREFOX 3 OK。 提示提示提示提示：：：：完美兼容就是把display屬性設為inline-block，同時也可兼容前兩種情況。 block，，，，inline，，，，inline-block的區別的區別的區別的區別：：：： display:block;——類似與DIV標簽的寬高邊距等屬性均可定制的元素特性； display:inline;——類似與<a>、<strong>標簽的寬高等屬性不可定制的元素特性； display:inline-block;——“全”可定制屬性的元素特性； 最佳通用方法最佳通用方法最佳通用方法最佳通用方法：：：：span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px; } 問題解決，希望對正在看着篇文章的你有幫助