Firefox または IE でスパン幅が決定されない場合の解決策

コードをコピー

コードは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml" >
<ヘッド>
<title>テスト範囲</title>
<mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">スパン {
背景色:#ffcc00;
幅:150ピクセル;
</スタイル>
</head>
<本文>
固定 <span >幅</span> スパン
</本文>
</html>

テストしたところ、Firefox でも IE でも無効であることがわかりました。

CSS2 標準の幅の定義を調べると、CSS の幅属性が必ずしも有効ではないことがわかります。オブジェクトがインラインオブジェクトの場合、幅属性は無視されます。 Firefox と IE はもともと標準に従うためにこれを行いました。

スパンをブロックタイプに変更し、フロートを設定することは完璧な解決策ではありません

span の CSS に display 属性を追加し、span をブロック型要素に設定します。これにより、確かに幅が変更されますが、前後のテキストが別の行に配置されます。このように、span は実際には完全に div になります。

コードをコピー

コードは次のとおりです。

スパン { 背景色:#ffcc00; 表示:ブロック; 幅:150px;}

多くの人は、CSS プロパティ float を追加することを提案しますが、これは確かに特定の条件下では問題を解決できます。たとえば、この例では、span の前にテキストがない場合でも、それは確かに実現可能です。しかし、それが存在する場合、その前後のテキストが接続され、span は 2 行目まで実行されます。

コードをコピー

コードは次のとおりです。

スパン { 背景色:#ffcc00;
ディスプレイ:ブロック; フロート:左; 幅:150px;}

スパン幅を設定するための完璧なソリューション

次のコードの CSS 定義は、スパンの幅を設定する問題を完全に解決します。ブラウザは通常、サポートされていない CSS プロパティを無視するため、display:inline-block 行を最後に記述するのが最適です。こうすることで、Firefox では、将来 Firefox 3 がリリースされた場合でもこの行が機能し、コードがさまざまなバージョンと同時に互換性を持つようになります。

コードをコピー

コードは次のとおりです。

<!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>テスト範囲</title>
<mce:style type="text/css"></mce:style>
<style type="text/css" mce_bogus="1">スパン { 背景色:#ffcc00; 表示:-moz-inline-box; 表示:インラインブロック; 幅:150px; }
</head>
<本文>
固定幅 span
</本文>
</html>

<<: docker compose helloworld を使い始めるための詳細なプロセス

>>: 一般的な DIV タスク (パート 2) — DIV のエディターとさまざまな DIY アプリケーションへの変換