/* CSS・スタイルシート質問スレッド【18】 */
23 ：Name_Not_Found：
前スレの911ですが、まだ問題を解決できていません。 ページに背景色つきの上枠を作りたいのですが、
常套手段ではIE5.0で致命的な表示不良が起こり、 これを回避する方法を考えています。
htmlのソースはこうです。
<div id="uewaku">
<div id="hidariue">
<a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a>
</div>
<div id="migiue">
<div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div>
</div>
</div>
スタイルシートはこれで問題はありません（ie5.5-6/ns7/op7)。
#uewaku { width: 100%; height: 40px; background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 40%; }
#migiue { float: right; text-align: right; width: 40%; }
質問はつづく。
常套手段ではIE5.0で致命的な表示不良が起こり、 これを回避する方法を考えています。
htmlのソースはこうです。
<div id="uewaku">
<div id="hidariue">
<a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a>
</div>
<div id="migiue">
<div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div>
</div>
</div>
スタイルシートはこれで問題はありません（ie5.5-6/ns7/op7)。
#uewaku { width: 100%; height: 40px; background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 40%; }
#migiue { float: right; text-align: right; width: 40%; }
質問はつづく。
|
|
|
24 ：Name_Not_Found：03/04/12 11:35 ID:Grrv8eF+
しかしこれだとie5で見るに絶えない空恐ろしい状態になります。原因は
#uewakuのwidthとheightで、これさえのければよいのですが、
そうするとn7/op7などでは#uewakuが0行と認知されて背景色がつきません。
そこでwidthとheightを指定せず、#uewakuの閉じタグ</div>の前に
<br style="clear:both">と入れると無事、ie5/n7/op7で同じ
表示が得られるのですが、今度はie6がheightを40pxプラス<br>と
認知して表示します。
そこでやっぱり<br style="clear:both">はやめにして、
スタイルシートを変更、
#uewaku { background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 50%; height: 41px; background-color: #333000; color: #b7a800; }
#migiue { float: right; text-align: right; width: 50%; height: 41px; background-color: #333000; color: #b7a800; }
として、要するに#uewaku不要にしてみたのですが、これだど
n7/op7でなぜか#migiueと#hidariueの間に隙間が生じます。
margin,padding,borderを加えて全部０にしてもだめです。
width,heightを使わず、同じ表示を得るよい手はないでしょうか。
#uewakuのwidthとheightで、これさえのければよいのですが、
そうするとn7/op7などでは#uewakuが0行と認知されて背景色がつきません。
そこでwidthとheightを指定せず、#uewakuの閉じタグ</div>の前に
<br style="clear:both">と入れると無事、ie5/n7/op7で同じ
表示が得られるのですが、今度はie6がheightを40pxプラス<br>と
認知して表示します。
そこでやっぱり<br style="clear:both">はやめにして、
スタイルシートを変更、
#uewaku { background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 50%; height: 41px; background-color: #333000; color: #b7a800; }
#migiue { float: right; text-align: right; width: 50%; height: 41px; background-color: #333000; color: #b7a800; }
として、要するに#uewaku不要にしてみたのですが、これだど
n7/op7でなぜか#migiueと#hidariueの間に隙間が生じます。
margin,padding,borderを加えて全部０にしてもだめです。
width,heightを使わず、同じ表示を得るよい手はないでしょうか。
25 ：Name_Not_Found：03/04/12 12:00 ID:???
>>24
あのさ、そのバグの解決法は俺のスキルじゃちょっとわからないんだけど、
IE5.0わかってるだけでも相当なバグがあるから、IE5.0でもきっちり同じ見栄えを、
と思うならJavascriptで振り分けたほうがいいと思う。
あのさ、そのバグの解決法は俺のスキルじゃちょっとわからないんだけど、
IE5.0わかってるだけでも相当なバグがあるから、IE5.0でもきっちり同じ見栄えを、
と思うならJavascriptで振り分けたほうがいいと思う。
26 ：Name_Not_Found：03/04/12 12:03 ID:???
>>23-24
それはFAQのＡ４に既出。>>7見て。
>これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
> http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
> http://cssbug.tripod.co.jp/detail/winie/b079.html
> http://pc2.2ch.net/test/read.cgi/hp/991666454/683n
それはFAQのＡ４に既出。>>7見て。
>これに当て嵌まらなかったら「浮動要素の高さもheightに含めさせる方法」などを参考に。
> http://www.mozilla.gr.jp/standards/webtips0021.html#c1_2
> http://cssbug.tripod.co.jp/detail/winie/b079.html
> http://pc2.2ch.net/test/read.cgi/hp/991666454/683n
ごめん、Ａ４でなくてＡ５だな。
要するに、<br style="clear:both">を入れて、且つ#uewakuにwidthを指定すること。
要するに、<br style="clear:both">を入れて、且つ#uewakuにwidthを指定すること。
28 ：24：03/04/12 12:26 ID:Grrv8eF+
皆さん、ありがとう。レスがついて幸せです。ようやく解決しました。
多少のバクなら目をつぶったのですが、かなりシェアのあるIE5で
heightが1000pxにされるような恐ろしいバグはさすがに見逃せません。
>>27さん、widthとheightは使わずに、という条件なので
貫徹してまで悩みぬいたのです（泣）
解決はこう。
<br style="clear:both">の変わりに、
<div> </div>に書き換え。
スタイルシートは、
div { clear: both; line-height: 0px; }
brでクリアするとIE6でheightの幅が大きくなります。そこで
空白文字を入れて、それをline-height:0pxで消したわけです。
あまりに悲しい解決法だったので、divのクラス名は「悲しい」にしました。
いままで安易に<br style="clear:both">していた方、
悲しいけど、こちらのほうが安全です。。。
多少のバクなら目をつぶったのですが、かなりシェアのあるIE5で
heightが1000pxにされるような恐ろしいバグはさすがに見逃せません。
>>27さん、widthとheightは使わずに、という条件なので
貫徹してまで悩みぬいたのです（泣）
解決はこう。
<br style="clear:both">の変わりに、
<div> </div>に書き換え。
スタイルシートは、
div { clear: both; line-height: 0px; }
brでクリアするとIE6でheightの幅が大きくなります。そこで
空白文字を入れて、それをline-height:0pxで消したわけです。
あまりに悲しい解決法だったので、divのクラス名は「悲しい」にしました。
いままで安易に<br style="clear:both">していた方、
悲しいけど、こちらのほうが安全です。。。
29 ：Name_Not_Found：03/04/12 12:32 ID:???
>>28
<hr style="clear:left;margin:0;height:0;"> の方がいいのでは。
但し互換（Quirks）モードだと、Mozillaに限り効かないけどね。
で、いままでのこと「バグ辞典スレッド」に登録しておいてくれない？
<hr style="clear:left;margin:0;height:0;"> の方がいいのでは。
但し互換（Quirks）モードだと、Mozillaに限り効かないけどね。
で、いままでのこと「バグ辞典スレッド」に登録しておいてくれない？
30 ：Name_Not_Found：03/04/12 12:33 ID:???
あまりにアレな解決法なんで口出ししてみる
同じ結果を得るのに必要なプロパティだけに絞ってみた
これでぶっ壊れるようなバグはIE5にはなかったと思うんだが・・・
#uewaku { height:41px; background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 40%; } /*widthは画像に合わせてもいい*/
#migiue { text-align: right; }
同じ結果を得るのに必要なプロパティだけに絞ってみた
これでぶっ壊れるようなバグはIE5にはなかったと思うんだが・・・
#uewaku { height:41px; background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 40%; } /*widthは画像に合わせてもいい*/
#migiue { text-align: right; }
>>30の指摘する通り、#migiueのfloat:rightは不要だな。これでいいはずだが。
#uewaku { width: 100%; background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 50%; height: 41px; background-color: #333000; color: #b7a800; }
#migiue { margin-left: 51%; text-align: right; height: 41px; background-color: #333000; color: #b7a800; }
<div id="uewaku">
<div id="hidariue">
<a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a>
</div>
<div id="migiue">
<div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div>
</div>
<br style="clear:both">
</div>
#uewaku { width: 100%; background-color: #333000; color: #b7a800; }
#hidariue { float: left; width: 50%; height: 41px; background-color: #333000; color: #b7a800; }
#migiue { margin-left: 51%; text-align: right; height: 41px; background-color: #333000; color: #b7a800; }
<div id="uewaku">
<div id="hidariue">
<a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a>
</div>
<div id="migiue">
<div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div>
</div>
<br style="clear:both">
</div>
32 ：24：03/04/12 14:15 ID:Grrv8eF+
>>29
<hr style="clear:left;margin:0;height:0;">が通用するのは
オペラ7だけのようです。
>>30さん、>>31さん、#uewakuにはwidthとheightのどちらか片方だけ
でもIE5.0でむごい障害が発生します。となると、clearするしか
方法はなさそうです。
ちなみに#migiwakuは簡略化しています。そこにはフォーム部品などが
ごてごて入っているのでfloatにしました。怪しんで消してみましたが、
floatは無関係でした。
<br style="clear:both">は曲者で、IE5とIE5.5−6で解釈が異なります。
NS7/OP7はすなおにクリアするだけですが、IE6でそれをすると
heightの下にプラスbrの1em分の余白が生じます。
<hr style="clear:left;margin:0;height:0;">が通用するのは
オペラ7だけのようです。
>>30さん、>>31さん、#uewakuにはwidthとheightのどちらか片方だけ
でもIE5.0でむごい障害が発生します。となると、clearするしか
方法はなさそうです。
ちなみに#migiwakuは簡略化しています。そこにはフォーム部品などが
ごてごて入っているのでfloatにしました。怪しんで消してみましたが、
floatは無関係でした。
<br style="clear:both">は曲者で、IE5とIE5.5−6で解釈が異なります。
NS7/OP7はすなおにクリアするだけですが、IE6でそれをすると
heightの下にプラスbrの1em分の余白が生じます。
33 ：Name_Not_Found：03/04/12 14:22 ID:???
34 ：Name_Not_Found：03/04/12 14:25 ID:???
>>32
>#uewakuにはwidthとheightのどちらか片方だけ
>でもIE5.0でむごい障害が発生します。
具体的には？ 再現条件は本当にwidthの所為だけなのか？ 下記へどうぞ。
・CSS/DHTMLバグ辞典スレッド ver2.0
http://pc2.2ch.net/test/read.cgi/hp/991666454/l50
>#uewakuにはwidthとheightのどちらか片方だけ
>でもIE5.0でむごい障害が発生します。
具体的には？ 再現条件は本当にwidthの所為だけなのか？ 下記へどうぞ。
・CSS/DHTMLバグ辞典スレッド ver2.0
http://pc2.2ch.net/test/read.cgi/hp/991666454/l50
35 ：Name_Not_Found：03/04/12 14:28 ID:???
>>32
><br style="clear:both">は曲者で、IE5とIE5.5−6で解釈が異なります。
>NS7/OP7はすなおにクリアするだけですが、IE6でそれをすると
>heightの下にプラスbrの1em分の余白が生じます。
それは、#uewakuにheightを指定してるからだろ。
cf. http://cssbug.tripod.co.jp/detail/winie/b079.html
><br style="clear:both">は曲者で、IE5とIE5.5−6で解釈が異なります。
>NS7/OP7はすなおにクリアするだけですが、IE6でそれをすると
>heightの下にプラスbrの1em分の余白が生じます。
それは、#uewakuにheightを指定してるからだろ。
cf. http://cssbug.tripod.co.jp/detail/winie/b079.html
36 ：Name_Not_Found：03/04/12 14:50 ID:???
>>23-24
#hidariueの中に高さ40pxのimg要素があるなら、height指定なんか要らないのでは？
#uewaku { background-color: #333000; color: #b7a800; }
#migiue { float:right; width:50%; text-align: right;}
#hidariue {height: 41px;}
<div id="uewaku">
<div id="migiue">
<div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div>
</div>
<div id="hidariue">
<a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a>
</div>
</div>
#hidariueの中に高さ40pxのimg要素があるなら、height指定なんか要らないのでは？
#uewaku { background-color: #333000; color: #b7a800; }
#migiue { float:right; width:50%; text-align: right;}
#hidariue {height: 41px;}
<div id="uewaku">
<div id="migiue">
<div class="annai"><a href="../index.html" class="kurozi">扉</a> > 目次</div>
</div>
<div id="hidariue">
<a href="index.html" class="kirikae"><img src=".画像.gif" alt="画像" width="100" height="40" class="画像" /></a>
</div>
</div>
>>35
いいえ。
heightの下にプラスbrの1em分の余白、というのは、
画像の縦幅プラスbr1行分の余白のことです。
でも、ここでの大前提はwidthとheightを指定しないという
一種の異常事態でのことですから。
DHMLバク辞典のほうに移ってソースをアップします。
いいえ。
heightの下にプラスbrの1em分の余白、というのは、
画像の縦幅プラスbr1行分の余白のことです。
でも、ここでの大前提はwidthとheightを指定しないという
一種の異常事態でのことですから。
DHMLバク辞典のほうに移ってソースをアップします。
38 ：Name_Not_Found：03/04/12 15:05 ID:???
>>36
おっしゃるとおりにhtmlソースの#migiueと#hidariueを入れ替えて、
cssも36さんが書いた通りに書き換えましたが、だめでした。
#uewakuにwidthもheightもないのに、もう訳がわかりません。
もちろんIE5意外ではきちんと表示されます。
おっしゃるとおりにhtmlソースの#migiueと#hidariueを入れ替えて、
cssも36さんが書いた通りに書き換えましたが、だめでした。
#uewakuにwidthもheightもないのに、もう訳がわかりません。
もちろんIE5意外ではきちんと表示されます。