掲示板/JavaScript質問板/過去ログ/一覧/ borderStyle変更で親divが縮んでしまう

0 名前： うひょ ： 2006/08/25（金） 00:49 ［URL］ ID:Y1L64jC2

次のソースで、
「はひふへほ」と書かれたボタンを押すと、なぜか親のdivが縮んでしまいます。
何故でしょうか。
borderStyleを変更しているだけなのですが…。
ブラウザは、IE6で確認しました。

<html><head><title>テスト</title>
<script type="text/javascript">
function btnpush(obj){
	obj.style.borderStyle = "inset";
}
function btnout(obj){
	obj.style.borderStyle = "outset";
}
</script>
</head><body>
<div style="background-color:aqua;border:2px outset;width:400;padding:15px">
<table border style="float:left">
<tr><td>あいうえお</td><td>かきくけこ</td></tr>
<tr><td>さしすせそ</td><td>たちつてと</td></tr>
<tr><td>あむあむむ</td><td>けけけけけ</td></tr>
<tr><td>ぶぶぶしぶ</td><td>あさひかわ</td></tr>
<tr><td>とうきょう</td><td>む</td></tr>
<tr><td>くくくくく</td><td>さしむねの</td></tr>
</table>
なにぬねの<br><br>
<div style="background-color:red;border:2px outset;width:100;height:30px;cursor:default" onmousedown="btnpush(this)" onmouseup="btnout(this)">はひふへほ</div>
</div>
</body></html>

1 名前： ラブーフ ： 2006/08/25（金） 00:49 ID:mGMjLPPf

こんばんは。レスがないようなので。

IE6のスタイルシート解釈には、有名なバグがたくさんあって、特にフロート(float)関連で
ありえない挙動が目につきます。これは、その一例ですね。なぜそうなるのか論理的根拠は
なくて、IE6の不可解なバグとしかいいようがありません(IE7b3では起きません）。
　
　有名どころ：http://www.positioniseverything.net/explorer/peekaboo.html

TABLEに指定してある float:left をなくせば、この問題は起きないことから、float
が悪さをしているだろうことは分かります(IE6以下において)。

レイアウトが少し変わっても良いのであれば、

なにぬねの<br><br clear="all">

とするか、あるいは、ボタンのDIVにて、

<div style="clear:both; background-color:red;border:.....

みたいにするかでしょうね。
ここは、JavaScriptの掲示板なので、スクリプトからアプローチするなら、

function btnpush(obj){
	var oH = obj.parentNode.offsetHeight;    // とりあえず取得
	obj.style.borderStyle = "inset";
	obj.parentNode.style.height = oH + "px"; // 縮んだサイズを元に戻す
}

とすればOKかもしれません。

2 名前： Pid ： 2006/08/25（金） 00:49 ID:GN4gjesz

とりあえず，Mozilla/Firefox か Opera をお持ちなら，それで確認してみて下さい。あるいは，>>0 のソースに文書型宣言をつけて，IE を標準準拠モードにして下さい（HTML 文書には，原則として文書型宣言が必須です）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

もうお分かりかと思いますが，その CSS の書き方ならば，「縮んだ状態」が「正しい」結果です。

解決策は >>1 でラブーフさんが提案されていますし，他にもあることはありますが，>>0 のマークアップだといろいろ厳しいかも……。CSS を使うなら，HTML をもう少し Strict に書いた方が無難ですよ。

3 名前： Pid ： 2006/08/25（金） 00:49 ID:GN4gjesz: >>2
> その CSS の書き方ならば，「縮んだ状態」が「正しい」結果です。

板違いですが一応メカニズム。
http://www.kanzaki.com/book/css/3-2.html#s3-2-4