Span要素のwidth属性にeffect_javascriptスキルがない理由と解決策

まずプログラムを実行して見てみましょう:
123

出力: 123

スパンに含まれるコンテンツに応じて幅が自動的に変更されることがわかります。

これは次の理由によるものです: インライン要素 (span 要素や表示: inline の要素など、デフォルトでインラインにすることができます)
幅と高さは、IE5.x および IE6 以降のバージョンでのみ使用できます。 quirks hasLayout モードでトリガーされます。 IE6 の場合、ブラウザーが標準互換モードで実行されている場合、インライン要素は幅または高さの属性を無視するため、この場合、幅または高さを設定しても要素にレイアウトを指定することはできません。
zoom はいつでも hasLayout をトリガーできますが、IE5.0 ではサポートされていません。

「layout」を持つ要素が inline も表示する場合、その動作は標準で言及されている inline-block と非常に似ています。通常のテキストのように段落内で水平方向に連続して配置され、垂直方向の影響を受けます。 -align、コンテンツに応じてサイズを適応的に調整できます。これは、IE/Win 単独では、インライン要素にブロック レベルの要素を含めることができる理由も説明できます。他のブラウザでは、IE/Win とは異なり、display: inline はインラインを意味し、インライン要素にレイアウトが作成されると、その後もレイアウトが保持されるからです。レイアウトはインラインブロックになります。



解決策:

ASP.NET ページから W3C 標準ステートメントを削除します (非推奨):
削除:
123


推奨事項:

display:block が設定されている場合、width 属性が有効になりますが、このときのスパンは部門
display:inline-block が設定されている場合、スパンは同じ行にリストされ、width 属性が有効になります。

要素の表示属性の一般的な値の説明:

block: ブロック オブジェクトのデフォルト値。オブジェクトを強制的にブロック オブジェクトとしてレンダリングし、オブジェクトの後に新しい行を追加します。
inline: インライン オブジェクトのデフォルト値。オブジェクトを強制的にインライン オブジェクトとしてレンダリングし、オブジェクトから行を削除します。 (インライン)

『CSS 決定版ガイド』 中国語テキスト表示: ブロックレベル要素ではない表示要素はすべてインライン要素です。そのパフォーマンスの特徴は「列レイアウト」という形式です。

ここでの「列レイアウト」とは、表現形式が常に列で表示されることを意味します。

たとえば、インライン要素 border-bottom:1px Solid #000; を設定すると、それが各行で繰り返され、各行の下に細い黒い線が表示されます。

ブロックレベル要素の場合、表示される黒い線はブロックの下にのみ表示されます。
inline-block: オブジェクトをインライン オブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロック オブジェクトとしてレンダリングします。隣接するインライン オブジェクトは同じ行にレンダリングされます。
非: 隠しオブジェクト。可視性プロパティの非表示値とは異なり、非表示オブジェクト用に物理スペースを予約しません。

inline(display:inline;)要素は、行レイアウトに属し、1行にレイアウトする特性があるため、幅と高さを設定できません。
123

出力: 123


float:left | right を設定すると、幅属性が有効になります。 🎜>( Float) は、指定された要素を通常のドキュメント フローから切り離すことができる特別なレイアウト機能です。また、FLOAT はブロックレベルの要素に適用する必要があります。つまり、フローティングはインライン タグには適用されません。言い換えると、FLOAT が適用されると、この要素はブロック レベルの要素として指定されます。

123
出力: 123