Select Option の代替品（３）

・<li> について、それから・・・

<li> にはてこずりました。オプションリスト表示の高さを得るために

「リストの高さ = １行の高さ X 行数」としているので、どうしても「１行の高さ」が必用なんですが、

・<li> の高さが取れない。undefined が返ってきます。かなり粘ってみたのですがダメ。高さが取れないので、他の物の高さから「<li> の高さ = 40px」として進めたのですが、

・<li> に高さをセットしても反映されない。これもかなりの時間を使ってしまいました。分かったのは

・【表示されていない】状態の <li> の高さなどは取得できない。同様に

・【表示されていない】状態の<li> に高さ等をセットしても反映されない。

色々いじっていたら、表示されていれば高さなどを取得できるし、値をセットすれば反映されるという事が分かりました。高さは何とかなったのですが・・・次に引っかかったのは・・・

・valign:middle がきかない。何が何でも上寄せになってしまいます。これにも時間を使ってしまいましたが、高さ:20 とし、padding-top=10; padding-botton:10 とすると、それらしい見かけになりました。
他のエレメントはそれなりに動くのだけれど <li> は違うんですね。これ、<li> の仕様なのかバグなのか分かりませんが・・・

短いけど、今回はこれだけ。の予定だったんですけど早速、テスト用 Html のバグが発覚しました。MySelect の外枠（outline）が【横倒しした「こけし」】みたいな形になってしまう事があるんです。Firefix だとＯＫなんですが、Chrome, Edge では「こけし」になってしまいます。調べてみたら、MySelect の２つの <input type=text. の間の改行が原因でした。Html ファイル上では単なる改行なんですが、この改行コードが「標準高さの空白文字」と解釈されていたようです。border などを表示させると、２つの text の間に空白がありました。標準よりも高い２つの textbox に挟まれて標準高さの空白文字、となっていたと思われます。これの outline を表示していたので、標準高さの空白の部分が「首」になっていたんですね。ところで、【Firefix だとＯＫなんですが、Chrome, Edge では「こけし」になってしまいます。】どっちが本来の仕様なんでしょうね。ひょっとすると仕様はないのかも知れませんね。ＨＴＭＬって、ブラウザの裁量にまかされている部分がかなりあるようなので。結局、この改行を削除してＯＫとなりました。読みにくいけど、しょうがない。