解決済みの質問

IE6でテキストボックスを選択できない。マウスをテキストボックスに重ねると、フ...

IE6でテキストボックスを選択できない。

マウスをテキストボックスに重ねると、フォーカスイベントは発生しますが、クリックしてもアクティブになりません。

IE7・8、Firefox3、Safari4、Opera9、Chrome2

では動作確認済みです

Multiple IE や Run IE8/IE7/IE6でバグを確認しました。

しかし、IETesterというソフトで確認した場合は、バグが起こりませんでした。

html部分

<form action="hoge" method="post" class="contact_form">

<input name="name" type="text" value="" accesskey="n" tabindex="140" class="form_name" />

<input name="mailaddress" type="text" value="" accesskey="e" tabindex="150" class="form_mailaddress" />

<textarea name="opinion" accesskey="c" tabindex="170" rows="10" cols="70" class="form_opinion"></textarea>

<input name="age" type="text" value="" accesskey="a" tabindex="180" class="form_age" />

<input name="gender" type="radio" value="男" accesskey="m" tabindex="190" class="form_gender_m" />
<input name="gender" type="radio" value="女" accesskey="f" tabindex="200" class="form_gender_f" />

<input name="submitButtonName" type="image" src="img/common/button_conf_off.jpg" alt="確認" onmouseover="this.src='img/common/button_conf_on.jpg'" onmouseout="this.src='img/common/button_conf_off.jpg'" accesskey="s" tabindex="300" class="form_submit" />

</form>

CSS部分

div.contact_form{ width:645px; height: 785px; background:url(../img/bg/contact_body.jpg) 0 0 repeat-y; margin-top: 20px; position: relative; }
form.contact_form input,form.contact_form textarea{ background: none; border: none;}
.form_name,.form_mailaddress,.form_age,.form_opinion{ position: absolute; left: 85px;}
.form_gender_m{ position: absolute; left: 94px;} .form_gender_f{ position: absolute; left: 180px;}
.form_name{ top: 129px; width: 474px; height: 23px;}
.form_mailaddress{ top: 235px; width: 474px; height: 23px;}
.form_age{ top: 338px; width: 90px; height: 23px;}
.form_gender_m,.form_gender_f{ top: 412px;}
.form_opinion{ top: 500px; width: 475px; height: 165px;}
.form_submit{ top: 695px; left: 230px; position: absolute;}

解析が大変だと思いますが、お願いします。
「仕様だ」と言っていただけるだけでもそこから解決に導きたいと考えております。

補足: sii_side 様

ご丁寧にありがとうございました。
その通りしたのですが、修復できませんでした。

これはどういう事かと思って検証していたら、
YahooやGoogleの検索窓も選択できない事に気づきました・・・。

意味が解りません。最近した事といえばIE8にバージョンアップした事ぐらいですが・・・。

違反報告

質問日時：

2009/9/2 19:36:05
解決日時：

2009/9/17 04:34:07
回答数：

2
お礼：

知恵コイン

50枚
閲覧数：

1,225
ソーシャルブックマークへ投稿：

Yahoo!ブックマークへ投稿

はてなブックマークへ投稿

（ソーシャルブックマークとは）

ベストアンサーに選ばれた回答

sii_sideさん

<input type="text" style="
background: none;
border: none;
position: absolute;
top: 200px;
left: 200px;
">

どうやら、これを全部満たす（positionとtop・leftはセットで）のが原因なのではないかと思います。この数行のコピー＆ペーストでも、手元では現象が再現されました。

では、ここから指定を個別に弄っていくとどうなるか…試してみました。

（１）backgroundを弄ってみる
backgroundプロパティは、いくつかのプロパティをまとめて指定することのできる簡略化プロパティです。具体的には、

・background-color
・background-image
・background-repeat
・background-position
・background-attachment

をまとめて指定できます。大事なのは、「指定されていないプロパティは初期値に戻る」ということです。

noneというキーワードはbackground-imageプロパティのものです。background-imageの初期値はnoneなので、これはこれで初期値に戻すという作業をしています。

他のプロパティも初期値に戻ります。関係ありそうなのはbackground-colorですが、background-colorの初期値はtransparentですので、background: none;により、background-color: transparent;を指定したのと同じ効果が得られます。

つまり、現状がbackground-color: transparent;なので、違う色を指定してみました。

background: none;
↓
background: #fff none;

このようにすると…IE6でも、「普通に」クリックでカーソルを合わせることができました。

（２）borderを弄ってみる
borderプロパティも、backgroundプロパティと同じ簡略化プロパティです。

ここでは、backgroundを元に戻して、思い切ってborder: none;を外してみました。すると…テキストボックスの「中」をクリックできないのは変わらずですが、線のところをクリックするとフォーカスできるようになりました。

（３）position・top・leftを弄ってみる
position: absolute;を外してみると…あら不思議、「普通に」クリックでフォーカスできるようになりました。

以上、これらのプロパティがそれぞれ絡まりあって、お尋ねの現象が起こっているようです。背景色を入れてもいいのであれば、（１）で弄っているように任意のbackground-colorを入れるのが手っ取り早いのではないかと思います。