パソコンQ&A

ボックス要素の内包要素がボックスに収まりきらないときにボックスが拡大される

CSSの仕様では、overflowプロパティーの値がvisibleに指定されている場合、ブロック要素の内包要素がインライン要素でボックスに収まりきらないときは ボックスの外に表示されると規定されています。
ところがIEでは内容物の大きさに合わせてボックスが拡大されます。
ほとんどのブラウザの初期値はoverflow: visible;なので、何も指定していなければvisibleになります。

通常は文字が長くなると改行されて高さが変わることになるので、デザインに影響することはあまりありませんが、 改行されない要素であった場合は横幅が拡大されて、特にfloatなどでは大きくデザインが崩れることがあります。
改行されない要素というと画像であったりテーブルであったりするのはわかりますが、連続する半角英文字も改行されないので注意してください。
(例:URLなど)

『連続する半角英文字は自動改行されない』
これはバグではなく、どのブラウザでも同じです。
IE独自プロパティですが下の指定をすると英単語の途中でも自動改行されます。

* {
  word-wrap:break-word;
}

対象ブラウザ

Windows
Internet Explorer6以下(標準・互換)

回避方法

なし

横幅が広がるのを避けるにはword-wrap:break-word;を指定してURLなどを自動改行できるようにする。

関連プロパティ

overflowはみ出た内容の表示方法を指定する
float左または右に寄せて配置する
word-wrap単語の途中で改行するかどうかを指定する
height高さを指定する
width幅を指定する


主要ブラウザに非対応

このページはリンクフリーです。設定などは自己責任で…
Copy Right kikky

kikky.net