原文地址 ： http://hi.baidu.com/java_learning/item/0ad9083f179f145b81f1a7c8
先看下面代碼:
<span style='background-color:#333;width:200px;'>php自學網</span>
輸出:php自學網
可以看到 span會自動根據包含的內容來變化寬度.
這是因爲:對於內聯元素(可以是默認即爲內聯的比如 span 元素，也可以是 display: inline 的元素)
width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下觸發 hasLayout 。而對於 IE6，如果瀏覽器運行於標準兼容模式下，內聯元素會忽略 width 或 height 屬性，所以設置 width 或 height 不能在此種情況下令該元素具有 layout。
zoom 總是可以觸發 hasLayout，但是在 IE5.0 中不支持。
具有“layout” 的元素如果同時也 display: inline ，那麼它的行爲就和標準中所說的 inline-block 很類似了：在段落中和普通文字一樣在水平方向和連續排列，受 vertical-align 影響，並且大小可以根據內容自適應調整。這也可以解釋爲什麼單單在 IE/Win 中內聯元素可以包含塊級元素而少出問題，因爲在別的瀏覽器中 display: inline 就是內聯，不像 IE/Win 一旦內聯元素擁有 layout 還會變成 inline-block。
解決方法:
<1>去掉頁面的W3C標準聲明(不推薦):
去掉:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<span style='background-color:#333;width:200px;'>php自學網</span>
<2>推薦:
如果設置display:block，width屬性生效，但是此時的span跟div一樣了。
如果設置display:inline-block，則span並列在同行，而且width屬性生效。
元素display屬性的常見值說明：
block：塊對象的默認值。將對象強制作爲塊對象呈遞，爲對象之後添加新行。
inline：內聯對象的默認值。將對象強制作爲內聯對象呈遞，從對象中刪除行。(內聯)
《CSS權威指南》中文字顯示:任何不是塊級元素的可見元素都是內聯元素。其表現的特性是“行佈局”形式，
這裏的“行佈局”的意思就是說其表現形式始終以行進行顯示。
比如，我們設定一個內聯元素border-bottom:1px solid #000;時其表現是以每行進行重複，每一行下方都會有一條黑色的細線。
假如是塊級元素那麼所顯示的的黑線只會在塊的下方出現。
inline-block：將對象呈遞爲內聯對象，但是對象的內容作爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內。
non：隱藏對象。與 visibility 屬性的hidden值不同，其不爲被隱藏的對象保留其物理空間。
內聯(display:inline;)元素不能設置寬高，因爲內聯屬於行佈局，其特性是在一行裏進行佈局，所以不能被設定寬高。
<span style='background-color:#333;width:200px;display:inline-block;'>php自學網</span>
輸出:php自學網
<3>如果設置float:left | right,width屬性生效.
(浮動)他使得指定元素脫離普通的文檔流而產生的非凡的佈局特性。並且FLOAT必需應用在塊級元素之上，也就是說浮動並不應用於內聯標籤。或者換句話來說當應用了FLOAT那麼這個元素將被指定爲塊級元素。
<span style='background-color:#333;width:200px;float:left;'>php自學網</span>
輸出:php自學網