Firefox または IE_HTML/Xhtml_Webpage Production において、span で幅を決定できない問題の解決策-htmlチュートリアル-php.cn

コードをコピー コードは次のとおりです: テスト スパン span { background-color:#ffcc00; } --> span { background-color:#ffcc00; width:150px; 🎜> 固定 width テストに合格した後、FirefoxでもIEでも動作しないことが判明しました。 CSS2 標準の幅の定義を調べると、CSS の元の幅属性が常に有効であるとは限らないことがわかりました。オブジェクトがインライン オブジェクトの場合、幅属性は無視されます。 Firefox と IE は当初、標準に従ってこれを行っていました。 スパンをブロック タイプに変更し、float を設定することは完全な解決策ではありません スパンの CSS に表示属性を追加し、幅が次のようにブロック タイプ要素にスパンを設定します。正しいです。これは機能しますが、前後のテキストが別の行に分離されてしまいます。このようにして、span は実際には div になります。 コードをコピーします コードは次のとおりです: span {background-color:多くの人は、特定の条件下で問題を解決できる別の CSS 属性 float を追加することを提案します。たとえば、この例では、span の前にテキストがない場合、実際に実行可能です。ただし、存在する場合は、前後のテキストが結合され、span は 2 行目まで実行されます。 コードをコピーします コードは次のとおりです: span {background-color: #ffcc00; display:block; float:left; width:150px;} スパン幅を設定するための完璧なソリューション 次のコードは完璧です。スパン幅の設定の問題を解決しました。ブラウザは通常、サポートされていない CSS プロパティを無視するため、Firefox で将来の Firefox 3 に達した場合にこの行が機能するように、最後に display:inline -block 行を記述するのが最善です。このコードはさまざまなバージョンと互換性があります。同時に。 コードをコピー コードは次のとおりです: テスト スパン span { 背景色:#ffcc00; 表示:-moz-inline-block; 幅:150px;} --> span {background-color:#ffcc00; display:inline-block;} 🎜>