IEだけ勝手にform内の部品が勝手に動きます。選択状態にすると縦やら横やらに勝手に動くので大変不愉快です。どのようにすれば部品を固定できるでしょうか？よろしくお願いします http://www.youtube.com/watch?v=hsF5XyHUAjs&list=HL1338305219&feature=mh_lolz

フォーカスが移った時に入力欄の枠線が出て、その分だけ外側の枠（テーブルセル？）が広がってるようです。 CSSで以下を指定してみてください。 select:active, select:focus { border: 0; } または、擬似クラスを付けない単純な、 select { border: ---- } で指定しているborderと同じものを指定してみてください。他の対処法として。 - となっている場合、入力欄を囲っている要素、のpaddingをもう少し広げてみる、 selectのmarginを広めに指定する tdのheightを広げる tdにoverflow: hiddenを指定する select要素などのline-heightを広げてみる（ td *{ line-height: 1.5 } ）などの方法があると思います。生年月日の方でセル枠が広がらないのは、ラジオボタンのマージンが十分大きいからだと思います。

IEだけの現象　form内の部品が勝手に動く

解決済

質問者：takuya12421242
質問日時：2012/05/30 00:29
回答数：5件

IEだけ勝手にform内の部品が勝手に動きます。選択状態にすると縦やら横やらに勝手に動くので大変不愉快です。どのようにすれば部品を固定できるでしょうか？　よろしくお願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： ORUKA1951
回答日時：2012/05/31 08:07

いえ、試すのはそちらで・・

繰り返しますが、(IEの旧バージョンを気にするなら、)paddingは禁忌です。
tdに対してpaddingを使用するのではなく、その内容のtd input,td selectにmarginを設定しましょう。特にその内包要素にwidthプロパティを設定しているときは。
　また、原因が:hoverによるborderの変化でしたら、td,thに対してline-heightとvertical-alignを設定しても良いでしょう。

- 2
- 件

通報する

この回答へのお礼

回答有難うございました　

通報する

お礼日時：2012/06/07 00:12

No.4

回答者： ORUKA1951
回答日時：2012/05/30 17:36

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;
}

どうでしょうか？

補足日時：2012/05/30 23:55

通報する

- 1
- 件

通報する

この回答へのお礼

回答有難うございました

通報する

お礼日時：2012/06/07 00:12

No.3

回答者： ORUKA1951
回答日時：2012/05/30 08:10

まず、標準モードで起動するようにHTMLを変更すること(必須です)

IEが互換モードの場合、ボックスの寸法をpadding辺の外側までを計算します。本来はpadding辺の内側でないとならない。
→ボックスの寸法（Box dimensions） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
標準モードで動作させるためには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. … )で文法チェック

　次に、paddingを使わず、それに含まれる要素のマージンで余白を決める。

　この対策はもっとも基本的なことです。

- 1
- 件

通報する

この回答へのお礼

回答有難うございます。最初に書かれているstrictするは最初からやっています。文法も最初からちゃんとチェックしています。ついでにCSSもチェックしています。
最後の方に書いてある　paddingを使わず、それに含まれる要素のマージンで余白を決める。　の詳しいことを教えて下さい

ちなみに
table#table-01 td {
padding: 7px 7px 7px 7px;
border: 1px #a9a9a9 solid;
border-width: 0 0 1px 1px;
}
とか来ましたがまだ”IE”だけずれてしまいます・・・
IEさえなくなればいいんですけど(笑)

通報する

お礼日時：2012/05/30 10:44

No.2

回答者： taloo
回答日時：2012/05/30 01:43

フォーカスが移った時に入力欄の枠線が出て、その分だけ外側の枠（テーブルセル？）が広がってるようです。

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 } ）
などの方法があると思います。

生年月日の方でセル枠が広がらないのは、ラジオボタンのマージンが十分大きいからだと思います。