Solution to the problem that span cannot determine the width in Firefox or IE_HTML/Xhtml_Webpage Production

Copy code

The code is as follows:

span {
background-color:#ffcc00;
width:150px ;
}
-->

< ;body>
fixed width span

After passing the test, it was found that it was invalid. It doesn't work either in Firefox or IE.

By consulting the definition of width in the CSS2 standard, we found that the original width attribute in CSS is not always valid. If the object is an inline object, the width attribute will be ignored. Firefox and IE originally did this by following standards.

Modifying span to block type and setting float is not a perfect solution

Add the display attribute in span’s CSS and set span to block type Element so that the width is correct It works, but it also separates the preceding and following text on different lines. In this way, span actually becomes a div.

Copy code

The code is as follows:

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

Many people will suggest adding another CSS attribute float, which can indeed solve the problem under certain conditions. For example, in our example, if there is no text in front of span, it is indeed feasible. But if there is, the text before and after will be connected together, and span will run to the second line.

Copy code

The code is as follows:

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

Perfect solution for setting span width

The CSS definition of the following code is perfect Solved the problem of span width setting. Since browsers usually ignore unsupported CSS properties, it is best to write the display:inline -block line at the end, so that in Firefox, if the future Firefox 3 is reached, this line will work. The code Can be compatible with various versions at the same time.

Copy code

The code is as follows:

span { background-color:#ffcc00; display:-moz-inline-box; display:inline-block; width:150px;}
-->