Workarounds for no effect on the Width property of HTML elements

1. About the Width property of the element no effect first run the next program look under: [Html]<span style= ' background-color: #336699; width:300px; ' >123</span> [/html] You can see that span automatically changes width based on what is included because: for inline elements, such as span elements, which can be inline by default, it can be 1. No effect on the width property of an element
First run the following program to see:

Tip: You can modify some of the code before running

You can see that span automatically changes width based on what is included
This is because: for inline elements (which can be inline by default, such as span elements, or display:inline elements)
Width and height only trigger haslayout under ie5.x and IE6 or later in quirks mode. For IE6, if the browser is running in standard compatibility mode, the inline element ignores the width or Height property, so setting width or height cannot be ordered in this case to have layout of the element.
If the element with "layout" is display:inline at the same time, its behavior is similar to that of the standard Inline-block: in the same way as normal text in the paragraph, in the horizontal and continuous arrangement, affected by vertical-align, And the size can be adjusted according to the content adaptive. This can also explain why inline elements in Ie/win alone can contain block-level elements that are less problematic, because Display:inline is inline in other browsers, unlike Ie/win, which becomes inline-block once inline elements have layout.
Workaround:
<1> Remove the Web page's standard statement (not recommended):
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<span style= ' background-color: #336699; width:300px; ' >123</span>
<2> Recommended:
If the set Display:block,width property is in effect, the span at this point is the same as p.
If you set Display:inline-block, span is tied to the peer, and the width property takes effect.

common value descriptions for element display properties:
Block: The default value of the Block object. Forces an object to be presented as a block object, adding a new row after the object.
Inline: The default value for inline objects. Forces an object to be presented as an inline object, removing rows from the object. (inline) The text in the CSS authoritative guide shows that any visible element that is not a block-level element is an inline element. Its performance is the "Row layout" form, where the "row layout" means that its representation is always displayed as rows. For example, we set an inline element border-bottom:1px solid #000, and it behaves as if it were repeated in each line, with a thin black line underneath each row. If it is a block-level element then the black line shown will only appear below the block.
Inline-block: Renders an object as an inline object, but the object's contents are presented as a block object. Inline objects next to each other are presented in the same row.
Non: Hides the object. Unlike the hidden value of the visibility property, it does not retain its physical space for objects that are hidden.
the inline (display:inline;) element cannot be set to a wide height because the inline is a row layout and its properties are laid out in one row, so it cannot be set to a wide height.
<span style= ' background-color: #336699; width:300px;
Display:inline-block; ' >123</span>

<3> If setting Float:left | The Right,width property takes effect.
(floating) He makes the specified elements out of the ordinary flow of documents resulting from the extraordinary layout characteristics. and float must be applied above the block-level element, which means that the float does not apply to inline tags. Or in other words, when float is applied, this element is specified as a block-level element.
<span style= ' background-color: #336699; width:300px;float:left; ' >123</span>
the difference between the 2.Css Display:inline property and the float
Display:inline; The function of a property is to make a block-level element into an inline element, such as p, after setting the inline property, it will no longer occupy a single line of the position. Using the Float property page, however, can also be used to achieve this effect. (See inline elements and block-level elements for inline and block-level elements)
Setting the Width property has no effect when the element is set to the inline property and becomes an inline element.
After reading the effect of Display:inline on block-level elements, let's look at the effect of float on the element in the row.
That is, when the inline element sets the float property, he actually thinks he is a block-level element and can set the Width property