- ベストアンサー
IEだけの現象 form内の部品が勝手に動く
IEだけ勝手にform内の部品が勝手に動きます。選択状態にすると縦やら横やらに勝手に動くので大変不愉快です。どのようにすれば部品を固定できるでしょうか？ よろしくお願いします
- takuya12421242
- お礼率96% (494/514)
- HTML
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
いえ、試すのはそちらで・・ 繰り返しますが、(IEの旧バージョンを気にするなら、)paddingは禁忌です。 tdに対してpaddingを使用するのではなく、その内容のtd input,td selectにmarginを設定しましょう。特にその内包要素にwidthプロパティを設定しているときは。 また、原因が:hoverによるborderの変化でしたら、td,thに対してline-heightとvertical-alignを設定しても良いでしょう。
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
table#table-01 td { padding: 7px 7px 7px 7px; border: 1px #a9a9a9 solid; border-width: 0 0 1px 1px; } のpaddingをつけると・・・ [例] #table-01 td { padding: 7px 7px 7px 7px; border: 1px #a9a9a9 solid; border-width: 0 0 1px 1px; } ↓ <td> <select name="****"> </td> table td{ padding:0; border: 1px #a9a9a9 solid; border-width: 0 0 1px 1px; } table td select,table td input,tabl td button{ margin:7px; } ★idの必要はない。詳細度が高くなりすぎて他のtdですべて設定しなければならない。詳細度を下げて、すべてに適用させるとシンプルにわかりやすくなる。 <table class="form" summary="入力フォーム"> <tbody> <tr> <th abbr="date" class="indisp">入力日</th> <td><select name="date"><option>1<option>2******</td> </tr> **** [CSS] table.form{ border-collapse:collapse; } table.form,table.form td,table.form th{ border:ridge 1px silver; padding:0; } table.form td select,table.form td input{ margin:7px; } table th.indisp{color:red;} とか・・・ 【補足】 idやclass名はデザインのためにつけるのではなく、あくまで文書構造を明確にするためのものです。スタイルシートはその文書構造を使ってプレゼンテーションを指定するものです。ここはもっとも大事です。 [例]table.form th.indispは、文書構造は 「formのあるtableですよ。その中に必須の(indispensable)な見出しがある」とマークアップして、スタイルシートで「入力フォームのtable(table.form)内の必須項目の見出しセル(th.indisp)の文字は赤くする。」と記述します。 そうすると、後日見直すときもHTMLを開かなくてもスタイルシートだけ見ればよい。もちろん、HTMLの修正も楽。「id=table-01」じゃ何のことかわからないでしょう。
お礼
回答有難うございました
補足
回答有難うございます 一度CSSを洗い流してみてこのようにしました table.inputform { margin-right: auto; margin-left: auto; width: 700px; border: 1px #a9a9a9 solid; border-collapse: collapse; } .inputform td { padding: 4px 4px 4px 4px; border: 1px #a9a9a9 solid; border-width: 0 0 1px 1px; } input:focus,select:focus,textarea:focus{ background: #fffacd; } どうでしょうか？
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まず、標準モードで起動するようにHTMLを変更すること(必須です) IEが互換モードの場合、ボックスの寸法をpadding辺の外側までを計算します。本来はpadding辺の内側でないとならない。 →ボックスの寸法（Box dimensions） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions ) 標準モードで動作させるためにはHTMLをstrictにする。 →hxxk.jp - DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 ) ( http://hxxk.jp/2008/09/29/0118 ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> その上で、Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )で文法チェック 次に、paddingを使わず、それに含まれる要素のマージンで余白を決める。 この対策はもっとも基本的なことです。
お礼
回答有難うございます。最初に書かれているstrictするは最初からやっています。文法も最初からちゃんとチェックしています。ついでにCSSもチェックしています。 最後の方に書いてある paddingを使わず、それに含まれる要素のマージンで余白を決める。 の詳しいことを教えて下さい ちなみに table#table-01 td { padding: 7px 7px 7px 7px; border: 1px #a9a9a9 solid; border-width: 0 0 1px 1px; } とか来ましたがまだ”IE”だけずれてしまいます・・・ IEさえなくなればいいんですけど(笑)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
フォーカスが移った時に入力欄の枠線が出て、その分だけ外側の枠（テーブルセル？）が広がってるようです。 CSSで以下を指定してみてください。 select:active, select:focus { border: 0; } または、擬似クラスを付けない単純な、 select { border: ---- } で指定しているborderと同じものを指定してみてください。 他の対処法として。<td><select>-</select></td>となっている場合、 入力欄を囲っている要素、<td>のpaddingをもう少し広げてみる、 selectのmarginを広めに指定する tdのheightを広げる tdにoverflow: hiddenを指定する select要素などのline-heightを広げてみる （ td *{ line-height: 1.5 } ） などの方法があると思います。 生年月日の方でセル枠が広がらないのは、ラジオボタンのマージンが十分大きいからだと思います。
お礼
回答有難うございます。ココに書いてあることをは全てやってみましたが全然効果がありませんでした(泣) WEB制作泣かせ”IE”！！
- chile5583
- ベストアンサー率38% (44/114)
IEのverは何でしょう？ 古いIE(6)では、そのような現象はありませんので、あなたのお使いのバージョンのバグかもしれませんね。
お礼
最新のIEです
お礼
回答有難うございました