document.getElementById( ).style.displayについて

質問

「document.getElementById( ).style.display」を使って
スタイルシートを書き換え、画像とテキストの表示替えをしています。
Firefoxでは正常に動作するのですが、
IEでは「displayプロパティ」を取得できずに動作しません。
htmlは以下のとおりです。
どなたかお分かりになる方、教えていただけないでしょうか？
よろしくお願いします。

★javascriptの内容
function toggle(Aid,Bid,Cid,Did,Eid) {
document.getElementById(Aid).style.display = 'none';
document.getElementById(Bid).style.display = 'inherit';
document.getElementById(Cid).style.display = 'inherit';
document.getElementById(Did).style.display = 'none';
document.getElementById(Eid).style.display = 'none';
}
★スタイルシートの内容
#page {width: 910px;}
#ai{height: 33px;display:inherit;}
#kaki{ height: 33px;display:none;}
#img_ai{margin: 0px;float: left;display:none;}
#img_kaki{margin: 0px;float: left;display:inherit;}

回答No.1

dennou2000 · ベストアンサー

いろいろ調べてみましたが、結論として
「inherit」をＩＥ系(IE5.x、IE6)がサポートしていないのが原因の様です。

「displayプロパティの値を取得できませんでした。引数が不正です。」
のメッセージは、～～.style.displayのプロパティが参照できない事が原因ではなく、右辺値'inherit'が
受け付けられない事によって起こっています。

function toggle(Aid,Bid,Cid,Did,Eid) {
　　document.getElementById(Aid).style.display = 'none';
　　document.getElementById(Bid).style.display = 'inherit';　　※
　　document.getElementById(Cid).style.display = 'inherit';
　　document.getElementById(Did).style.display = 'none';
　　document.getElementById(Eid).style.display = 'none';
}

現在は、※の箇所でエラーが発生します。
試みに、一行目の'none'を'xxxx'に変えると、そこでエラーが発生します。
これは、代入値が受付可能なものでないとエラーとなる事を示しています。

ちなみに以下のＭＳＤＮのライブラリでも、displayプロパティに対する設定値として'inherit'は
出てきません。
(http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/css_ref_attributes_entry.asp）

一方で、FirefoxのCSS対応表
(http://f57.aaa.livedoor.jp/~motohiko/CSS/css2.1.html）
「'run-in', 'inline-block', 'inline-table' には非対応。」とありますが、'inherit'は対応している
ようです。

代替手段はありそうですが、質問者の方が'inherit'をどのような意図で使っているかわかりかねるので
その点はお答えかねます。

お礼

inheritがIEのサポート外だったのですね。
ありがとうございます。
特にinheritを使わなければいけないわけじゃなかったので
blockに変更して、無事正常な動きをするようになりました。

ご丁寧な回答をいただきましてどうもありがとうございました。