span設定寬度有效無效問題

在html中如何設定span的寬度？這看上去是個很簡單的問題，似乎用style中的width屬性就可以。例如，

1
doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"23
"">45
<
html 
xmlns
="">67
<
head
>89
<
title
>test span
title
>
1011
<
style 
type
="text/css"
>
1213
span 
2021
style
>
2223
head
>
2425
<
body
>
2627 fixed <
span
>width
span
>
span
2829
body
>
3031
html
>

通過試驗以後發現，無效，無論是在firefox還是ie中都無效。

通過查閱css2標準中關於width的定義發現，原來css中的width屬性並不總是有效的，如果物件是inline物件，width屬性就會被忽略。firefox和ie原來是遵循了標準才這樣做的。

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

span

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

span

其實，在html的各種element中，的確有既是inline，又能夠設定寬度的情況存在。例如下面**就顯示了button物件，就可以很好的在文字中間出現，並且設定寬度。

fixed width button

那能不能讓span象button那樣顯示呢？通過css2標準中display的定義和inline物件的解釋，發現css2標準的制定者把所有的element在是否屬於inline上做了非此即彼的規定，要麼是inline，要麼是block，有沒有制定button那樣既是inline，又可以象block那樣設定寬度的屬性值。

再看更新的標準，在css2.1標準草案中display的定義中增加了乙個叫inline-block的屬性值，針對的恰好是我們面對的這種情形。那麼再看看各種瀏覽器的對應情況。

通過display的文件了解到，inline-block在未來的firefox 3中會實現。通過mozllia擴充套件屬性參考了解到，在firefox 3以前的版本，例如現在的firefox 2中，可以用-moz-inline-box達到同樣的效果。

通過msdn中的display文件了解到，inline-block已經實現。實際測試發現ie 6.0以後都沒問題。

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

1
doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"23
"">45
<
html 
xmlns
="">67
<
head
>89
<
title
>test span
title
>
1011
<
style 
type
="text/css"
>
1213
span 
2425
style
>
2627
head
>
2829
<
body
>
3031 fixed <
span
>width
span
>
span
3233
body
>
3435
html
>

span設定寬度有效無效問題

span設定寬度有效無效問題

設定span的寬度

設定span的寬度

相關推薦