IE9でCSS3を適応させると動作がおかしい

Question

よくある普通のチャット(PHP)のデザインを変更して使おうと思っています。

[ 　入力欄　　　　　　　　　　　] [発言] [退室]

チャットの入室画面でフォームの配置がこのようになっており、
入力欄にメッセージを書いてエンターを押すと送信され下部に表示されます。
大抵どのチャットでもエンターを押すとカーソルは入力フォームにとどまり、
そのまま続けて入力→エンターで発言ができます。
Google ChromeとFirefoxでは問題ないのですが、
IE9のみエンターを押した後に続けて入力することができません。
エンターを押すとなぜかtabキーを押した時と同じような状態になり、
隣の発言ボタンがマーキング？されてしまいます。
なので、エンターを押した後にいちいち入力フォームにマウスを持っていってクリックしないと次が入力できません。

原因を調べてみると、どうもCSS3と関係があるようだということが分かりました。
IE9でCSS3の記述（例えば画像などの角丸やボックス内の背景のみを透過するなど）を使うには、
<meta http-equiv="X-UA-Compatible" content="IE=9" />
上の記述を<head>内に入れないといけないようなのですが、
これを書いてCSS3を適応させると上記の問題が起こり、
書かない場合はエンターを押して送信した後、そのまま入力フォームにカーソルがとどまってくれます。

どうしても他のページやブラウザと概観を統一したいのでCSS3をIE9にも適応させたいです。
フォームの挙動とCSSは関係ないような気がするんですが、どうしてこういうことが起こるんでしょう？
また、対策などお分かりになる方がいればよろしくお願いします。

ORUKA1951 · Accepted Answer

実際のページを見せていただく術(すべ)がないので原因はわかりませんが、根本的な対策としては、CSS3など最新の技術を使用しないことです。
「画像などの角丸やボックス内の背景のみを透過するなど」
は、あくまでおまけとして、CSS3ではないと表示できないスタイルより前にCSS2.1の範囲内でのスタイルを記述しておくことです。
　いまだに、IE8も無視できないシェアを持ってます。

ウェブページの考え方
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　からすると、折角HTMLでページを作成しながら、端末の制限をすることは本末転倒です。

具体的には、
<meta http-equiv="X-UA-Compatible" content="IE=9" />
を使うのではなく、
IE8など用に、CSS2.1の範囲内で設定した後、CSS3の指定を書いておくと良いです。
[例]
border:solid gray 2px;
border-radius:10px;
で、CSS3対応のブラウザは、border-radiusが適用され、CSS3対応のブラウザでは角が丸くなる。
というふうに・・

所詮、ユーザーが利用してくれるのはデザインではなく、コンテンツですから、折角苦労して作成したコンテンツがデザインのために利用されない---ではあまりに悲しいですから。

IE9でCSS3を適応させると動作がおかしい

実際のページを見せていただく術(すべ)がないので原因はわかりませんが、根本的な対策としては、CSS3など最新の技術を使用しないことです。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング