IE6 だけ　dl の集まりが左右に動く

[新着] Webテンプレートを仮オープンしました

0   名前： ななみ ： 2007/04/12（木） 02:43  ［URL］  ID:Fw3vrX1/ sub-.G
花の名前・その読み方・その画像　を dl でまとめたものを　いくつか
float で順に左に寄せて並べています。
その画像は　JavaScript で拡大画像を表示するようにしています。

IE6 で見た時だけ　画像をクリックすると　dl でまとめたものが　全て
左に動き　「更新」すると右に動きます。

Firefox1.5 と Netscape7.1 では動きませんし　lint や Validator で
エラーを見つけることもできません。
dl の使い方がおかしいのかとも考えましたが　その方法は他のページでも
使っています。
（そちらでは　JavaScript を使ってませんので　気付かないだけかもしれませんが）　

IE6 でも左右に動かないようにするには　どうしたらいいのでしょう？
説明だけでは分かりにくいので　URL に書かせていただきました。
私流の書き方で　特にスタイルシートはお見苦しいかと存じますが
どうぞ　よろしくお願いいたします。
1   名前： 匿名 ： 2007/04/12（木） 02:43  ID:SHqbFxHj sub-Cz
とりあえず、
http://cssbug.at.infoseek.co.jp/detail/winie/b009.html
2   名前： ななみ ： 2007/04/12（木） 02:43  ［URL］  ID:Fw3vrX1/ sub-.G
匿名　ID:SHqbFxHj sub-Cz　さん　お返事ありがとうございました。
「バグリスト」を読ませていただきました。

「最後の子要素」とか「hover 擬似クラス」という言葉は　よく理解できませんが
いろいろ書かれている「条件」が当てはまっていることは理解できました。

「条件が一つでも満たされなければ　この不具合は発生しません。」と書かれてましたので
「リンクを含む」以外の　「font-weight,font-size,border,padding」を消してみました。
URL に書き込んだファイルです。
いろいろ消しても　やっぱり動きます。

こういう　「バグを引き起こすような作り方」自体　使わない方がいいのでしょうか。
同じような　「花の名前・読み方・画像」のセットを並べて画像に JavaScript を使う方法として
別のファイルでは　違った並べ方をしております。

　http://www.nagominoniwa.net/sakuin/tsubaki01.html

左右のセットを二つまとめて box で囲んでいます。　左右に動くことはありません。
そのファイルも　今回のファイルのような作り方に変えたいと考えておりました。
もっとたくさんのセットを並べたいので　画面幅に応じて並ぶ数が変わるようにと
考えて作ったのが　今回のファイルの形です。

最初の質問から少しずれるかもしれませんが
私の望むような形に作るには　どのように考えて書けばよろしいのでしょうか？

「質問」に書いたURLのファイルも　きちんと修正できれば　使い物になりますでしょうか？

頭の中が混乱して　意味のわからない文章になったかもしれませんが
どうぞ　よろしくお願いいたします。
3   名前： 匿名 ： 2007/04/12（木） 02:43  ID:NIND9D3i sub-Ds
「ie6 dl dt 横並び　２個」

これ？
4   名前： ななみ ： 2007/04/12（木） 02:43  ［URL］  ID:Fw3vrX1/ sub-.G
匿名　ID:NIND9D3i sub-Ds　さん　お返事ありがとうございました。

「DT DDを横並び」の　「IE6ではDDが2個続くと数pxずれる。」
この部分のことをおっしゃっているのでしょうか。

表示される位置が少々ずれていても　かまわないのですが　その位置から
動くのが困るのです。

１の匿名さんがお書きくださった

　http://cssbug.at.infoseek.co.jp/detail/winie/b009.html

の　「補足」に書かれている状態と　サンプルの動きに似ています。

「左にずれていた物が　リンクが:hover状態になったとき　右に動き　更新すると左に動く（戻る？）」
「右にすれていた物が　画像をクリックしたとき　左に動き　更新すると右に動く（戻る？）」

少し違う部分もありますが　動き方は似ているように思います。
読ませていただいても　きちんと理解できなかったようで　私の修正では動きを止めることが出来ませんでした。

直し方を教えていただけると　ありがたく存じます。
どうぞ　よろしくお願いいたします。
5   名前： ななみ ： 2007/04/12（木） 02:43  ID:ItkYQji8 sub-.G
IE でも　動かないようにすることが出来ました。

ヒントとして教えていただいた記事を　何度も読んで考えてみましたが
どうしても理解できませんでしたので　「DT DDを横並び」をお書きの
サイトのオーナーさんに　昨夜ＤＭを書いて　教えていただきました。

float の使い方が良くなかったようで
　・「floatしたボックスは親要素の高さの算出に使われない」という仕様
　・ IEのmarginの解釈の違い
が　関係しているようです。

スタイルシートの直し方も　教えていただきました。
div.sub-section { clear: both; margin: 5px 10%; text-align: left; }

と書いていたのを
div.sub-section { 
	clear: both;
	margin: 5px 10%;
	text-align: left; 
 	_height: 1px; /*フロートする子要素を高さの算出に入れる [IE向け: widthまたはheightを明示]*/
}

/*フロートする子要素を高さの算出に入れる [モダンブラウザ向け: 生成内容でクリア]*/

div.sub-section:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

と書き換えることで　おかしな動きが止まりました。

いつか　どなたかのお役に立つことも有るかと思い　おかしな動きをするファイルも
名前を変えてアップしておきました。

　動くファイル：http://www.nagominoniwa.net/2007/070339-3.html
　動かなくなったファイル：http://www.nagominoniwa.net/2007/070339.html
6   名前： 匿名 ： 2007/04/12（木） 02:43  ID:z4uQsZWC sub-Cz
グッジョブ！マジでグッジョブ！

さっそく勉強させて頂きます。
一覧へ戻る