在Firefox或IE中span没法明确宽度的处理计划方案


拷贝编码
编码以下:

<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;}

许多人会提议再提升1个CSS 特性 float ,这样确实在某种标准下能处理难题。例如大家的事例中,假如span前面沒有文本,那确实是可行的。可是假如有了,前后左右文本就会连在1起,而span跑到了第2行。

拷贝编码
编码以下:

span { background-color:#ffcc00;
display:block; float:left; width:150px;}

设定 span 宽度的完善处理计划方案

下面编码的 CSS界定完善处理了span的宽度设定难题。因为访问器一般对不适用的CSS特性采用忽视解决的心态,因此最好是将display:inline -block行写在后边,这样在Firefox里边,假如到了将来的Firefox 3,这1行就可以起功效,编码能够另外适配各种各样版本号。

拷贝编码
编码以下:

<!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>
<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>