css解决span宽度问题

在本次修改模板过程中,span宽度问题始终困扰着我ie7下好了,ie6下又出问题。因为我是菜鸟,经过百度+google后发现,在css2的标准中,查阅关于width的定义,原来css中的width属性并不总是有效的,如果对象是inline对象,width属性就会被忽略。Firefox和IE都遵循了这个标准。

下面代码的css定义完美解决了span的宽度设置问题。由于浏览器通常对不支持的css属性采取忽略处理的态度,所以最好将display:inline-block行写在后面,这样在Firefox里面,如果到了未来的Firefox 3,这一行就能起作用,代码可以同时兼容各种版本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Test Span</title> 
<style type="text/css"> 
span { 
background-color:#fc0; 
display:-moz-inline-box; 
display:inline-block; 
150px; 
} 
</style> 
</head> 
<body> 
WEB2.0建站<span>width</span>SEO优化 
</body> 
</html>

原文地址:https://www.cnblogs.com/losesea/p/3013957.html