缺省情況下span的寬度設定無效
在html中如何設定span的寬度？這看上去是個很簡單的問題，似乎用style中的width屬性就可以。例如，
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head>
<title>Test Span</title>
<style type=”text/css”>
span {
background-color:#ffcc00;
width:150px;
}
</style>
</head>
<body>
fixed <span>width</span> span
</body>
</html>
通過試驗以后發現，無效，無論是在Firefox還是IE中都無效。
通過查閱CSS2標準中關于width的定義發現，原來CSS中的width屬性并不總是有效的，如果對象是inline對象，width屬性就會被忽略。Firefox和IE原來是遵循了標準才這樣做的。
修改span為block類型并設置float不是完美解決
在span的CSS中增加display屬性，將span設置為block類型的Element，這樣寬度的確有效了，不過也把前后文字隔在不同行里面。這樣其實span就完全變成了div。
span {
background-color:#ffcc00;
display:block;
width:150px;
}
很多人會建議再增加一個CSS屬性float，這樣的確在某種條件下能解決問題。比如我們的例子中，如果span前面沒有文字，那的確是可行的。但是如果有了，前后文字就會連在一起，而span跑到了第二行。
span {
background-color:#ffcc00;
display:block;
float:left;
width:150px;
}
button的情況
其實，在Html的各種Element中，的確有既是inline，又能夠設定寬度的情況存在。例如下面代碼就顯示了button對象，就可以很好的在文字中間出現，并且設定寬度。
<body>
fixed <button style=”width:150px;”>width</button> button
</body>
能不能讓span象button那樣顯示呢？通過CSS2標準中display的定義和inline對象的解釋，發現CSS2標準的制定者把所有的Element在是否屬于inline上做了非此即彼的規定，要么是inline，要么是block，沒有制定button那樣既是inline，又可以象block那樣設置寬度的屬性值。
更新的標準CSS 2.1
再看更新的標準，在CSS2.1標準草案中display的定義中增加了一個叫inline-block的屬性值，針對的恰好是我們面對的這種情形。那么再看看各種瀏覽器的對應情況。
Firefox
通過display的文檔了解到，inline-block在未來的Firefox 3中會實現。通過Mozllia擴展屬性參考了解到，在Firefox 3以前的版本，例如現在的Firefox 2中，可以用-moz-inline-box達到同樣的效果。
新聞熱點
疑難解答
