IE

« FireFoxでRSS・Atom自動発見ー>HepCatに登録… | メイン | BlogWrite 1.2.0 »

2004年09月23日

文字の周り込みとIEのバグ

[ Blog/BlogWrite ]

BlogWriteで画像を挿入した場合、画像に対して文字等の回りこみ(align)指定をする事が出来ます。これをすると、画像を右によせて、文章を画像の周りに回りこむように配置することが出来るのですが、これを指定した場合、画像のサイズによってははみ出して次のエントリーにまで侵食することがあります。

これを回避するには、回り込み解除を適当な場所に挿入します。<br clear=”all” />などを回り込み解除する場所(文末など)に挿入します。

しかし、これをすると特定の環境でIEで閲覧中に問題が起きます。有名なIEのバグです。どんな問題かというと、画像を挿入している所の幅(Width)が自動になっていると、その部分が真っ白になってしまうという問題です。最新のバージョンのIEでこれですから、IEを使っているSleipnir(スレイプニル)やHepCatでも同様の症状です。

つまり、このBlogでは出来ません。ここは中央部分の記事コンテンツ部分をウィンドウサイズにあわせて可変にしていますので、上記の事をすると真っ白の憂き目にあります。

市場で圧倒的なシェアをいまだ持つIEがこういったバグを長い間放置しているのは、なんだかなぁ、という気持ちです。

ウェッブデザイナー(ウェッブ開発者含む)は技術だけでなく、こういった細かい個々の環境でのクセを知っていなければなりません。数年前はもっとシンドかったですが最近はNetscape4.7系が滅びてくれたので楽です。今はIEが一番の問題となっています。

という事で、BlogWriteで画像に回り込み指定をした場合、下に侵食しないように自動で文末に回り込み解除を入れようかと考えていましたが、結局回避不能っぽいので、止めました…。<br />とかで調整するしかないかもしれません。

追記:どんな風になるかというと、それらしい写真付きページがココ。イヤー綺麗な人ですね…。^^;

投稿者 BlogWrite担当 : 2004年09月23日 17:21

トラックバック

このエントリーのトラックバックURL:
https://www.witha.jp/b/mt-tb-hate-spam.cgi/161

このリストは、次のエントリーを参照しています: 文字の周り込みとIEのバグ:

» アップロードした画像に影をつけるには from nlog(n)
アップロードした画像に影をつけるにはいくつかの方法があるが,それぞれ一長一短がある。一番手間がかからなさそうな CSS を使った方法を導入する。… [続きを読む]

トラックバック時刻: 2005年05月15日 02:01

コメント

この問題はスタイルシートで解決できたと思います。

あとバッドノウハウですが、いったん画面を下方向にスクロールさせてから元に戻すと、ちゃんとした表示になります。

投稿者 tsupo : 2004年09月24日 09:58

>この問題はスタイルシートで解決できたと思います。

そこまで言ったら方法教えてくださいよ~。
http://www.keynavi.net/ja/bugh/css_misc.html#_title_4_5
にもありますが、スタイルシートでやってもダメポ。

>いったん画面を下方向にスクロールさせてから元に戻すと、ちゃんとした表示になります。

そうですね。マウスで選択したりすると表示されますが、それではダメなんです。
「ページが真っ白だ」、と怒られるのは私ですから…^^;

投稿者 BlogWrite担当 : 2004年09月25日 03:00

floatを設定する際、画像だとwidth属性(width)を設定しないと表示が乱れてしまうかと。
floatに限らず、背景などが乱れる場合、その要素にwidth100%を設定してやると直る場合があります。

参考URL
http://unmovabletype.org/archives/2004/08/float_img.html

投稿者 ken : 2004年09月25日 17:30

>floatを設定する際、画像だとwidth属性(width)を設定しないと表示が乱れてしまうかと。

画像のWidthでしたら、指定するのは当然として回り込み指定時のIEのバグはそのまま変化なしですね…。

>floatに限らず、背景などが乱れる場合、その要素にwidth100%を設定してやると直る場合があります。

もし、このBlogで、中央コンテンツエリアをwidth 100%と指定すると、中央コンテンツ部分が画面の幅に合わさり、水平スクロールバーが表示されて画面からはみ出してしまいます。IEの場合。

これまたIEのバグのような気がしますが…。
FireFoxなどのMozilla系では100%としても問題ありません。意図した通りに表示されます。IEはCSSダメダメなんですよ…MozillaやOperaと比較すると….。

結局解決策ないようですね..。orz

ためしにどうなってしまうか、今日だけ画像を表示させて見ます。IEでみると分かると思います。

投稿者 BlogWrite担当 : 2004年09月26日 08:40

表示の乱れを見さしてもらいました。
両サイドのカラムはfloat設定してるのですね。

憶測で申し訳ないのですが、本文内で「回り込み解除」してしまうと、
float設定しているサイドカラムの下辺に、その後の文章が続くみたいですね。

そうなると、両サイドのカラムをfloat使わないやり方で3カラム化にしないといけなくなるということかなあ

投稿者 ken : 2004年09月27日 19:16

>両サイドのカラムはfloat設定してるのですね。

CSSでこのレイアウトを実現する、他のやり方ってありますかねぇ…。両サイドのカラム幅は固定で中央コラム幅は自動、というレイアウトです。

結局、コンテンツエリアの幅を固定に指定出来ないレイアウトだとアウトっぽいです…。でもIEのバグにレイアウトを制限されるのって癪ですね。

投稿者 BlogWrite担当 : 2004年09月27日 19:58

度々、すいません(笑)
↓のバグになるのかな?
http://cssbug.at.infoseek.co.jp/detail/winie/b150.html
補足に書いてある方法で回避できればいいのだけど・・・。

float以外の3カラム方法だと下記の方法があるけれども、
このblogで上手くいくかどうかは運次第。わはは

#left {
position: absolute;
top: 150px;/*バナーの高さ分に設定する*/
left: 0px;
width: 190px;
overflow: hidden;
}

#center {
margin: 0 auto 0;
padding: 10px 190px;
text-align: center;
}

#right {
position: absolute;
top: 150px;
right: 0px;
width: 190px;
baclground-color:#FFFFFF;
overflow: hidden;
}

投稿者 ken : 2004年09月27日 21:24

>このblogで上手くいくかどうかは運次第。わはは

わはは。絶対位置指定だと色々問題があるので…嫌いです。Googleのキャッシュとして表示される時とか…悲しくなります。

でも、教えていただいたサイトの回避条件情報が参考になりそうです。てか有名サイトでしたね..。(http://cssbug.at.infoseek.co.jp/detail/winie/b150.html)

ありがとうございます。

しかしBlogWriteには回り込み解除を自動で挿入するという機能をつけることはできないので残念です..。IEのバグがある限り…。

投稿者 BlogWrite担当 : 2004年09月27日 21:41

position: absolute; は、IE のバグ(なのか仕様なのか知りませんが)にもろにヒットします。これを使うと、マウスで文字列を選択できない、もしくは選択したいのと違うところが選択されてしまう、という現象が発生します。

>>この問題はスタイルシートで解決できたと思います。
>そこまで言ったら方法教えてくださいよ~。

すぐに解決法が思い出せたら書いてますよ~。
まだ、思い出せません (^^;

あと、width の件ですが、ちょうど 100% にせずに、98% とか 97% とか、100% にちょっと足りない数字にすると、期待した表示になる(ことがある)というテクニックが知られています。ただし、Opera で見ると間抜けな表示になってしまいますが (^^;

投稿者 tsupo : 2004年09月29日 17:02

コメントしてください

TypeKey ID を使って サイン・イン してください。

Previous article

Post 12

Next article

Typekeyweb API