前へ:html0003.html|次へ:html0005.html::戻る

nyantarou and css box model002

file name :html0004.html And :data-css/0004.css

outbox width :480px; ,padding:0px; ,border:0px; ,margin:0px;

make new box box480a condition

margin:0px;
color:#333333;
margin:0px;
background-color : #66cc33;
border-left :10px solid #cc0099;
padding-left :20px;
width :450px;
この場合 和ジラーは 幅 480 px で ピッタリ収まるは ずである。つまり total=480 px の 内訳は width=450 px と 左の border が 10px 左の padding が 20px であるので 450+10+20=480 px に なる。こ れを他のUAでみると width=450 の 内部に パディングと ボーダー を 含む ため 30px 分少なく 表示される。

次は box ; box480b を 作成しよう width 480 px の ものである。

margin:0px;
background-color : #cccc33;
border-right :10px solid #cc0099;
padding-right:20px;
width :480px;
この場合 和ジラーは 幅 480 px であるから パディングと ボーダー を の部分 30px の 値 右側に はみ出ているはずである。文字の 範囲は 480 px 内 部に収まっている これを パディングと ボーダー を 内部に 含む (UA) で見ると ピッタリに なると思える。

少なくとも Mac IE 5 系統 XP IE 6 系統 では box480b は ピッタリ で あり box480a は 何 px かは わからないが 推定では 30 px 内部に なる ように 見える。 パディングを 零にして 最後の 確認をすると。

color:#663300;
margin:0px;
background-color : #ffff33;
border-right:30px solid #cc0099;
padding:0px;
width :480px;

少なくとも Mac IE 5 系統 XP IE 6 系統 では box480b は ピッタリ で あり box480p も ピッタリ で 和ジラー は ボーダー 部分 はみ出してい るのが確認される。

さすれば何か対策を建てれないかということになる。ここからは Mac IE 5 系統 XP IE 6 系統 に対して有効か どうかは 不明であるが 行ってみる。box480m である。

color:#663300;
margin:0px;
background-color : #33ff33;
border-right:30px solid #cc0099;
padding:0px;
width :480px;
voice-family: "\"}\"";
voice-family: inherit;
width :450px;

残念と言おうかどうも 新しい 能力を 発揮するようで 和ジラー は 予定どおり Mac IE 5系統 XP IE 6 系統 に 付いては 幅が 少なくなります。拝!

これらから 対策としては 行わない 違いが あると いう認識のみ しておこ う 当然 OPERA の 対策も 保留とする 将来については 流れを 見ておくに とど める。

結論として ブラウザ (UA)の 相違に 依り 見えかたが 異なるということ です、各ブラウザの 特徴と そのバージョンに 対する 方策は色々あるのでしょ うが 初心者の にゃんたろう に とっては 無理な 事ですので 対策はしない 方 針で ゆきまひょう

.


前へ:html0003.html|次へ:html0005.html::戻る
Copyright © 2004.-2007. nyantarou All Rights Reserved.