IMG要素のいくつかの属性の代用

Netscape Navigator 4.xでの表示があまりに崩れているため、別ファイルに移し、被害(苦笑)は最小限にとどめました。 Netscape Navigator 4.xで見ても、理解に苦しむだけかもしれません。

hspace, vspace属性の代用

PADDINGMARGINかですが、まともに表示していそうなMozilla 0.9.8やOpera 6.0によれば、MARGINが正しいようです。 単位はpxです。 Internet Explorer 5.01ではPADDINGの設定は無視されているように見えます(Internet Explorer 6.00でも変わらず。)。 Netscape Navigator 4.78では、MARGINPADDINGともひどい結果で、borderの設定すら無視されています。 どうやったらこんな挙動が出来るのか、理解に苦しみます。

hspace属性(値:10), vspace属性(値:10)
(画像テスト)
PADDINGプロパティ(値:10px)
(画像テスト)
MARGINプロパティ(値:10px)
(画像テスト)

border属性の代用

無難にBORDERプロパティの適用でしょうかね。 と言うのも実は甘かったです。

例のごとく、NN4.78はレイアウトがぐちゃぐちゃです。 IE5.01とN6.01は期待通りの動作をします。 プロパティ値の指定は太さ(単位付き数値) 線種 をスペースで区切って指定します。 順番はどうでもいいようです。

上・右・下・左の太さを別々にしてすることも出来ます。 指定の方法はその順にスペースで区切るだけです。 また、BORDER-WIDTHで太さ、BORDER-COLORで色、BORDER-STYLEで線種、を指定することも出来ます。

border属性(値:2)
(画像テスト)
BORDERプロパティ(値:2px black solid)
(画像テスト)

線種にはnone(無し)、dotted(点線)、dashed(粗点線)、solid(実線)、double(二重線)、groove(谷線)、ridge(山線)、inset(内線)、outset(外線)が指定出来ます。 Mozilla 0.9.8、Opera 6.0は全ての線種に対応しているようです。 Internet Explorer 6.00は二重線までの対応になっています。

BORDERプロパティ(値:5px black none)
(画像テスト)
BORDERプロパティ(値:5px black dotted)
(画像テスト)
BORDERプロパティ(値:5px black dashed)
(画像テスト)
BORDERプロパティ(値:5px black solid)
(画像テスト)
BORDERプロパティ(値:5px black double)
(画像テスト)
BORDERプロパティ(値:5px black groove)
(画像テスト)
BORDERプロパティ(値:5px black ridge)
(画像テスト)
BORDERプロパティ(値:5px black inset)
(画像テスト)
BORDERプロパティ(値:5px black outset)
(画像テスト)

align属性の代用

テキストとのベースラインの位置あわせにはVERTICAL-ALIGNプロパティ、左右のフローティングにはFLOATプロパティを使いました。 まず、インラインテキストとの関係のチェックです。 Mozilla 0.9.8では期待通りの動作、Internet Explorer 6.00やOpera 6.0ではVERTICAL-ALIGN:bottomの場合、topを指定したようになってしまいました。 VERTICAL-ALIGNプロパティは他にtext-toptext-bottombaselinesupsub%指定も出来るようなので、細かく指定すれば再現できそうです。 Netscape 4.78はalign属性による動作は期待通りですが、VERTICAL-ALIGNプロパティはぐちゃぐちゃになります。

align属性(値:top)
テキスト(画像テスト)
align属性(値:middle)
テキスト(画像テスト)
align属性(値:bottom)
テキスト(画像テスト)
VERTICAL-ALIGNプロパティ(値:top)
テキスト(画像テスト)
VERTICAL-ALIGNプロパティ(値:middle)
テキスト(画像テスト)
VERTICAL-ALIGNプロパティ(値:bottom)
テキスト(画像テスト)

次に、左右のフローティングのチェックです。 Mozilla 0.9.8、Internet Explorer 6.00、Opera 6.0ではきちんとした動作をしているようです。 が、Netscape 4.78はalign属性による指定も吹っ飛んでしまっています。

align属性(値:left)
(画像テスト)
align属性(値:right)
(画像テスト)
FLOATプロパティ(値:left)
(画像テスト)
FLOATプロパティ(値:right)
(画像テスト)

Copyright © 2001-2002 One-Poem