span元素的width问题

 

最近遇到一个问题，无法为span元素设置width属性。查看CSS文档得知，浏览器会忽略行内元素（inline，或称：内联元素）的width属性。

网上给出的一种解决方法：

span { background-color:#f00; display:block; width:200px;}

但是这样会使 span 和它前后的元素分属两行，也就是说 span 其实是变成类似 div 的块级 （block）元素。

另一种解决方案（在上面的基础上增加左浮动）：

span { background-color:#f00;display:block; float:left; width:200px;}

 但是这时，span后的文字就需要增加清理，否则span前后的文字就会连在一行内。

最终完美的解决方案：

span { background-color:#f00; display:-moz-inline-box; display:inline-block; width:200px;}

 

display:inline-block，意思是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。这个属性在 Firefox3 beta、IE8 beta、Opera、Safari 中得到支持。Firefox中有私有属性Firefox 下却有私有属性 -moz-inline-box 可是实现“神似”的功能（不完美，会有后遗问题，比如 text-align 不好用，需要用 -moz-box-align 来调整。感谢 怿飞 的 文章《display:inline-block的深入理解》）。