閱讀553 返回首頁    go 技術社區[雲棲]

缺省情況下span的寬度設定無效的解決方案

在html中如何設定span的寬度？這看上去是個很簡單的問題，似乎用style中的width屬性就可以。例如，
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="https://www.w3.org/1999/xhtml" >
  4. <head>
  5. <title>Test Span</title>
  6. <style type="text/css">
  7. span {
  8.   background-color:#ffcc00;
  9.   width:150px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. fixed <span>width</span> span
  15. </body>
  16. </html>

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

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

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

在span的CSS中增加display屬性，將span設置為block類型的Element，這樣寬度的確有效了，不過也把前後文字隔在不同行裏麵。這樣其實span就完全變成了div。
  1. span {
  2.   background-color:#ffcc00;
  3.   display:block;
  4.   width:150px;
  5. }
很多人會建議再增加一個CSS屬性float，這樣的確在某種條件下能解決問題。比如我們的例子中，如果span前麵沒有文字，那的確是可行的。但是如果有了，前後文字就會連在一起，而span跑到了第二行。


    

  1. span {
    2. 

  2. 
  background-color:#ffcc00;

    3. 

  3. 
  display:block;

    4. 

  4. 
  float:left;

    5. 

  5. 
  width:150px;

    6. 

  6. }
    7. 

  7. 

    

    8. 

  8. 

    

    9. 



button的情況




其實，在Html的各種Element中，的確有既是inline，又能夠設定寬度的情況存在。例如下麵代碼就顯示了button對象，就可以很好的在文字中間出現，並且設定寬度。
    

  1. 
<body>

    2. 

  2. 
fixed <button style="width:150px;">width</button> button

    3. 

  3. 
</body>

    4. 

能不能讓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達到同樣的效果。
IE
通過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"
    2. 

  2. 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    3. 

  3. 
<html xmlns="https://www.w3.org/1999/xhtml" >

    4. 

  4. 
<head>

    5. 

  5. 
<title>Test Span</title>

    6. 

  6. 
<style type="text/css">

    7. 

  7. span {
    8. 

  8.   background-color:#ffcc00;
    9. 

  9.   display:-moz-inline-box;
    10. 

  10.   display:inline-block;
    11. 

  11.   width:150px;
    12. 

  12. }
    13. 

  13. 
</style>

    14. 

  14. 
</head>

    15. 

  15. 
<body>

    16. 

  16. 
fixed <span>width</span> span

    17. 

  17. 
</body>

    18. 

  18. 
</html>

    19. 





最後更新：2017-04-02 00:06:38
  上一篇：go MSSQL查詢優化
  下一篇：go 測試文檔