ajax操作によって、他タグ位置が自動で移動

質問

ajaxの勉強中のモノです。
とまぁ、ajaxとjqueryの区別もついてはいない小生ではありますが、申し訳ございません、どちら様かお分かりであればお知恵をお貸してください。

http://ajax.jlamp.net/

にあるサンプルソースを元に、当方でも同じような仕組みを組みたいと思っておりますが、ここのサンプルソースに出てくる実例ページ↓

http://ajax.jlamp.net/samples/sample03.html

を動かしてもらえるとお分かりになるかと思いますが、県のセレクト欄を選択すると、その横の市区セレクト欄にajaxによって市区データが充填されて、その充填された文字数によって勝手に市区セレクト欄の幅が初期表示より広くなります。
すると、そのまた横にある送信ボタンの位置が、自動で右にずれてくれます。ありがたいです。

ですが、丸ごとソースを当方の環境でコピって実演させてみたら、当方の環境では送信ボタンは初期位置のまま微動だにせず、幅が広くなった市区セレクト欄と重なって表示されてしまいます。ありがたくないです。

htmlの環境の問題だ・・・と言われたらそれまでですが、、、何か考えうる原因等お分かりになる方いらっしゃいましたら、ご指摘のほど、宜しくお願いします。
一応、ググってはみたものの、本件のような現象を検索する場合の語句がなかなか思いつかず、ajax ボタン 位置 自動 ずれる ・・・ など試してみたものの、答えみつからずです。

表示作業しているPCの環境を記載します。
当方はIE8を使用しております。本文にあるサンプル実例ページもIE8で起動して確認しましたら、きちんとボタンはずれますが、当方で用意したhtmlではボタンは動きませんでした。

ですが、firefoxで同様に起動したところ、なんと、ボタンは自動でずれてくれました。また、スマホ（android）でもボタンはきちんとずれてくれましたが、他PCでIE9で動かしたところ、やっぱり動きませんでした。でも本文サンプルは、IE9でも正常に動きました。
IEが原因っぽいですが、サンプルソースはきちんと動くので、如何ともし難いところです。。。

お力添えのほど、宜しくお願い致します。

回答No.2

kosukejlampnet · ベストアンサー

自分のサイトを参考にしてくれていらっしゃるようで、ありがとうございます。
お困りの内容についてはサイトを修正する範疇ではなさそうですので、こちらでお手伝いさせて頂きますね。

「ie select 幅 可変」とGoogle検索してみると以下のようなサイトが出てきました。
http://sevenseas.moo.jp/sp/2013/04/ie8%E3%82%84ie9%E3%81%A7%E5%8B%95%E7%9A%84%E3%81%AB%E7%94%9F%E6%88%90%E3%81%97%E3%81%9F%E9%A0%85%E7%9B%AE%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%8C%E4%B9%B1%E3%82%8C/

サンプルのページ（http://ajax.jlamp.net/samples/sample03.html）では
解説のためのものですので、最小構成で書いています。

自分でこのスニペットを利用する場合にどのようにしているかをお話いたします。
IEについてはご存知のように多くの不具合を抱えていながら、同時に多くの利用者もいるという非常に厄介な存在ではあります。

ただこの場合、セレクトボックスのオプション要素が動的に変更されうる場合には上記に示したような不具合が発生することが存在します。しかも、自分の力の及ばないユーザーのブラウザの設定の問題ですので、オプション要素が動的に変更されても、widthが変化しないように作成しています。つまり、CSSで幅を固定にしてデザインしています。

仮に、IEに不具合がなく、FireFoxのようにボタンを上手く配置してくれたとしても、セレクトボックスの幅は固定にしておくべきかなと思います。
スマートフォンのようにディスプレイの幅が狭いデバイスで表示したときに、セレクトボックスが選択した内容によって大きさが変化することで、いきなりボタンが画面の幅からあふれて行送りになってしまったりしては、ユーザビリティの観点からも望ましくありません。ユーザーからしてみると、「あったはずのボタンが消えてしまう」という不可解な現象が起きてしまいます。

※固定にしたらしたで、他の問題もあるので本当に困った存在です。IE。
http://black-flag.net/javascript/20090210-102.html

こちらはjQueryのプラグインもあるようですので、組み合わせて利用すればよろしいですよね。

お礼

まずは謝罪…
サンプルページの主様がコメントしていただけるとは思ってもみませんでした(汗)。勝手に転載してしまい、大変申し訳なく思っております。

そして感謝！
記載いただいた参考サイトに載ってる『ieの諸問題』、まさしくビンゴでした！当該箇所にチェックが入ってるのに加え、ソースを弄っているwebスペースのドメインが『互換表示に追加したwebサイト』にも登録されている始末でした。諸々の設定を削除したところ、ものの見事に解決した次第でございます。

誠にありがとうございました。
私個人的には脱IEを目指していこうと、phpやらjquery、ajaxに手を出そうとしてる矢先に、あまり深入りしなくても良かったかもしれない…でもなんとももどかしいIEのこの現象に陥り、なかなか気持ちよく前へ進めないでいましたが、これでようやくスッキリして開発に取り組むことができそうです。
あと、確かに自動で幅調整されるのは便利ですが、最初から固定幅にした方が、安心ですね。アドバイスも是非参考にさせて頂きます。

今回は誠にありがとうございました。
先にコメントいただいたwarpspace様もありがとうございました。

回答No.1

warpspace

先頭のDOCTYPE指定はサンプルと異なっていませんか。DOCTYPEでHTMLのバージョンや
DTD (文書型定義)の種類を定義しており、これが異なるとHTMLを表示したときに
予期しない動作をする場合があります。

参考URL：

http://www.d3.dion.ne.jp/~tiyoko01/sitoku/doctype.html

補足

投稿ありがとうございます。

DTDのところは、実は良く解ってないので(汗)、そこも含めて丸ごとコピーしておりますが、やはりダメでした。

ちなみに…
送信ボタンのタグ記述の後に、

<div id="output" style="display:none"></div>

っていうまったく意味のないdiv要素を配置し、そしてajax処理の最後に

var node = document.getElementById("output");
node.innerHTML = "";

なるものを実行させたら(カラ文字を表示させる感じ)、実はIEでも上手く動いてくれます（ボタンが自動でスライドしてくれる）。
もちろん先ほども書きましたが、この<div>要素にはまったく深い意味はありません。問題となってるselectタグの幅がajaxによって広くなったあとにdivを何らかの手段で弄ることによって、何らかの画面リフレッシュ的な効果があるのかなぁ、、、などと、実はいろいろロジックを弄ってる最中に偶然見つけた現象なのです。よって根拠も全くありません。

試しに node.innerHTML = ""; をコメントアウトすると、またIEではボタンが自動でスライドしてくれませんでした。