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

このQ&Aのポイント
  • IE9でCSS3を使用すると、入力フォームの挙動がおかしくなる現象が発生します。
  • IE9には、CSS3の記述を適応するために<meta http-equiv='X-UA-Compatible' content='IE=9' />を記述する必要があります。
  • この記述をすると、エンターキーを押した後に入力フォームにカーソルが残らず、次の入力ができなくなります。
回答を見る
  • ベストアンサー

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

よくある普通のチャット(PHP)のデザインを変更して使おうと思っています。 [  入力欄           ] [発言] [退室] チャットの入室画面でフォームの配置がこのようになっており、 入力欄にメッセージを書いてエンターを押すと送信され下部に表示されます。 大抵どのチャットでもエンターを押すとカーソルは入力フォームにとどまり、 そのまま続けて入力→エンターで発言ができます。 Google ChromeとFirefoxでは問題ないのですが、 IE9のみエンターを押した後に続けて入力することができません。 エンターを押すとなぜかtabキーを押した時と同じような状態になり、 隣の発言ボタンがマーキング?されてしまいます。 なので、エンターを押した後にいちいち入力フォームにマウスを持っていってクリックしないと次が入力できません。 原因を調べてみると、どうもCSS3と関係があるようだということが分かりました。 IE9でCSS3の記述(例えば画像などの角丸やボックス内の背景のみを透過するなど)を使うには、 <meta http-equiv="X-UA-Compatible" content="IE=9" /> 上の記述を<head>内に入れないといけないようなのですが、 これを書いてCSS3を適応させると上記の問題が起こり、 書かない場合はエンターを押して送信した後、そのまま入力フォームにカーソルがとどまってくれます。 どうしても他のページやブラウザと概観を統一したいのでCSS3をIE9にも適応させたいです。 フォームの挙動とCSSは関係ないような気がするんですが、どうしてこういうことが起こるんでしょう? また、対策などお分かりになる方がいればよろしくお願いします。

  • CSS
  • 回答数1
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

実際のページを見せていただく術(すべ)がないので原因はわかりませんが、根本的な対策としては、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対応のブラウザでは角が丸くなる。 というふうに・・  所詮、ユーザーが利用してくれるのはデザインではなく、コンテンツですから、折角苦労して作成したコンテンツがデザインのために利用されない---ではあまりに悲しいですから。

関連するQ&A

  • IEでの送信フォームについて

    IEでの送信フォームに関する質問です。 フォームの入力欄以外にカーソルをあてて Enter(Return)キーを押すと、 自動的にフォーカスが「送信」ボタンにいってしまい、 送信扱いになってしまいます。 <form> ~ </form>の部分で上記のような現象がおこります。 NNではおこりませんでした。 このフォーカスを無効にするにはどのような方法が あるでしょうか。どうかアドバイスをよろしくお願いします。

  • phpでcssの記述をデータベースに登録したい

    お世話になります php phpで動的にHTMLを生成したくてプログラミング中なのですが、エスケープ処理でつまづいてしまいました フォームのtextareaにcssコードを記述して送信したのですが、phpが止まってしまいます ◉フォーム <textarea name="css"></textarea> ◉入力した内容 /*メモを記述*/ #test {color:#F00;} 上記のような記述をフォームから送信してphpで受け取るにはどうしたら良いのでしょうか? エスケープシーケンスの理解不足だとは思うのですが、ご教授のほどよろしくお願いいたします

    • ベストアンサー
    • PHP
  • エクセルでIEを操作、検索フォームをアクティブに

    VBAを使い、エクセルから立ち上がっているIEを操作し、表示しているHP(YAHOOなど)の入力フォームをアクティブ状態(カーソルが点滅している状態)にしたいのですが、可能でしょうか? 類似の質問で、エクセルVBAでIE(たとえばYAHOOなど)に表示中の検索フォームにテキストを入力後、送信するというようなものは見かけます。 こういった場合、厳密にいえば、入力フォームをアクティブにしてテキストを入力しているわけではないので、IEのウィンドウをアクティブにした時に、検索フォームにカーソルが残っていません。 どなたか、エクセルVBAから入力フォームをアクティブ状態(カーソルが点滅している状態)にする方法をご存じではないでしょうか?

  • 入力した文字がそのまま残ってしまう

    IE5.5を使っています。 チャットなどで発言欄で入力してEnterを押して発言したあとでも 最初に発言した文字がそのまま発言欄や入力欄に残ってしまいます。 いちいち残った入力文字を消してから入力し直していますが 自動的に文字を消すにはどうしたらよいでしょうか? オートコンプリートの設定はWebとユーザー名・パスワードだけに チェックを入れてあります。 それとはちょっと違うような気がするのですが・・・・ 用語がわからないのでうまく説明できなくてごめんなさい。 お分かりになる方は教えてください。よろしくお願いします。

  • 急にIEのCSSバグが発生?

    自分のサイトを公開しているのですが、急にファイルをいじったわけでもないのに、一部cssの命令が無視?されてしまうようになりました。 起こったのは今日で、Firefoxでは表示が正しいことから、IEのみなんらか要因で急に表示がおかしくなったようです。 表示がおかしくなった箇所は、現在確認できるかぎり、 ・boder-top-left(light)の角丸が角にもどっている。 ・ツイートボタン、ハテナブックマーク、フェイスブックのボタンが横1列にしてあるはずなのに、改行されてしまっている。 の2点です。 他のcssの命令は通常通り適応されています。 この原因は何でしょうか。 またこのような、急にバグ?が起こることはよくあるのでしょうか。 回答よろしくお願いします。

  • [CSS] focusについて

    入力フォームを作っています。 CSSを使って入力フォームにフォーカスがある場合の表示方法を変えたいのです。 input:focus { background-color: #000000; } 上記の方法で可能なはずですが全く変化ありません。 ブラウザはIE6です。

    • ベストアンサー
    • HTML
  • CSSによるフレームIEだとダメ・・・・

    CSSによるフレームIEだとダメ・・・・ サイトのデザインを委託(無償)されてる者です。 そのサイトというのは、 http://jbbs.livedoor.jp/school/ のあとに 21722 と入力してください。 なお、上記サイトの運営者にはここにURLを記述することに了解しています。 上記のサイトで、掲示板の左右に、フレームをつくりたいと思っています。 そのフレームはCSSによる「疑似フレーム」にしたいのですが、 IEではうまくいきません。 スクロールバーが途中で終わってしまうのです。 google choromeやfirefoxなどではうまく表示されるのですが・・・ どなたかアドバイスください。

  • shift_jis にするとCSSを読まない

    フォームメールのページ送信すると文字化けが起こるので、utf-8からshift_jisに変えたところ 今度は外部CSSを読まうず、IE,firedoxでレイアウトが崩れてしまいます。 なんとかならないでしょうか?

    • ベストアンサー
    • HTML
  • CSS position: relativeについて

    a:hover{ position:relative; top:2px; right:2px; } このような記述をCSSにしています。 ネスケ7.1で見ると 1.バナーにカーソルを合わせると上半分の画像が消えてしまう。 2.リンクしている部分にカーソルを合わせると画面上部と右側にGoogle AdSense広告の残像?のようなものが見える。 という二点の不具合が見られるのですが、改善方法はありありますか? IEではこの問題は起きません。 また、position: relativeの記述をCSSから外すと1.2.の問題共にネスケ7.1でも起こりません。 解決法がなければposition: relativeを外そうと思いますが、出来れば記述したままで解決したいのでよろしくお願いします。

    • ベストアンサー
    • HTML
  • チャットでの、自動カーソル入力

    http://www.mytools.net/cgitools/chat2.html こちらのチャットを設置しました。 しかし、発言入力欄に自動カーソル入力されず、とても不便です。 自分でいくらかいじってみたのですが、エラーが出て思うようにできません。 どのように改造したらよいでしょうか。

    • 締切済み
    • CGI

専門家に質問してみよう