代碼如下:
<html xmlns="http ://www.w3.org/1999/xhtml " >
<head>
<title>Test Span</title>
<mce:style type="text/css"><!--
span {
background-color:#ffcc00;
width:150px ;
}
--></mce:style><style type="text/css" mce_bogus="1">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;}
設置 span 寬度的完美解決方案
下面代碼的 CSS定義完美解決了span的寬度設置問題。由于瀏覽器通常對不支持的CSS屬性采取忽略處理的態度，所以最好將display:inline -block行寫在后面，這樣在Firefox里面，如果到了未來的Firefox 3，這一行就能起作用，代碼可以同時兼容各種版本。
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >
<head><title>Test Span</title>
<mce:style type="text/css"><!--
span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;}
--></mce:style>
<style type="text/css" mce_bogus="1">span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;}</style>
</head>
<body>
fixed <span>width</span> span
</body>
</html>
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
