代碼如下:
<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>
通過(guò)試驗(yàn)以后發(fā)現(xiàn)，無(wú)效，無(wú)論是在firefox還 是ie中都無(wú)效 。
通過(guò)查閱 css2標(biāo)準(zhǔn)中關(guān)于width 的定義發(fā)現(xiàn)，原來(lái)css中的 width 屬性并不總是有效的，如果對(duì)象是 inline 對(duì)象，width 屬性就會(huì)被忽略。firefox 和 ie 原來(lái)是遵循了標(biāo)準(zhǔn)才這樣做的。
修改 span 為 block 類型并設(shè)置 float 不是完美解決
在span的css中增加display屬性，將span設(shè)置為block類型的element，這樣寬度的確有效了，不過(guò)也把前后文字隔在不同行里面。這樣其實(shí)span就完全變成了div。
代碼如下:
span { background-color:#ffcc00; display:block; width:150px;}
很多人會(huì)建議再增加一個(gè)css 屬性 float ，這樣的確在某種條件下能解決問(wèn)題。比如我們的例子中，如果span前面沒(méi)有文字，那的確是可行的。但是如果有了，前后文字就會(huì)連在一起，而span跑到了第二行。
代碼如下:
span { background-color:#ffcc00;
display:block; float:left; width:150px;}
設(shè)置 span 寬度的完美解決方案
下面代碼的 css定義完美解決了span的寬度設(shè)置問(wèn)題。由于瀏覽器通常對(duì)不支持的css屬性采取忽略處理的態(tài)度，所以最好將display:inline -block行寫在后面，這樣在firefox里面，如果到了未來(lái)的firefox 3，這一行就能起作用，代碼可以同時(shí)兼容各種版本。
代碼如下:
<!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>
更多信息請(qǐng)查看IT技術(shù)專欄
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試