質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

  • jQuery

    7111questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4304questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2214questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • Bootstrap

    1039questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • Internet Explorer

    300questions

    Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

HTML5 + Bootstrap + IE11にて、フォーカスを当てた時の挙動がおかしい

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,188

yasuyasu155

score 0

HTML5、Bootstrapにてページを作成しています。
IE11でテキストフィールドにフォーカスを当てた際に、謎の事象が発生しました。
1.枠線の影が消える
2.テキストフィールドの左上にグレーの影が表示される

イメージ説明

この現象は下記の環境で発生しています。
・Windows7 Professional SP1(32bit)
・IE 11.0.9600.18537 (更新バージョン 11.0.38(KB3203621)
・画面解像度 横:1280px
・DPIなし(詳細は質問の最後に記載)
Windows10のIE11やEdge、Chrome等では発生していません。
また、1280px以外の解像度では発生していません。

上記現象が再現できる状態のものを以下のサイトにアップロードしています。

リンク内容

現象自体はテーブルやテキストフィールドの横幅を変えれば発生しなくなるのは分かっています。しかし、テーブルの作り方によっては画面解像度横1280px以外でも発生するのではないかと危惧しています。

IEの不具合ではないかと疑っているのですが、同じようなことが発生する文献がある等、何か知恵や情報をいただけないかと思っています。


※※※※※※DPIなしの確認方法について※※※※※※
①デスクトップを右クリックし「画面の解像度」を選択
②「テキストやその他項目の大きさの変更」を選択
③ラジオボタンが・「小(100%)」になっているか

イメージ説明

以上、宜しくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • turbgraphics200

    2017/02/14 13:30

    Windows7およびIE11のバージョンを記載してください

    キャンセル

  • yasuyasu155

    2017/02/14 13:47

    質問を編集いたしましたので、お手数ですが宜しくお願い致します。

    キャンセル

  • gin

    2017/02/14 14:05

    stackoverflowへも投稿したようですが、下のヘルプにもあるようにマルチポストは推奨されていません。ご一読ください。

    キャンセル

回答 3

+2

私の環境(Win7、IE11)で確認してみましたが再現しませんね…
正常に見えています。
イメージ説明

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/14 12:51

    本当ですね。うまくいっているようです。
    ちなみにですが、windowsの画面の解像度の横幅は1280pxでしょうか??
    こちらでは5台程度メーカー違いのWindows7 + IE11があるのですが全て再現しているもので・・・。

    キャンセル

  • 2017/02/14 12:57

    はい、解像度を1280pxにして試してみました。
    「DPIなし」がよく分からないのでスルーしてますが、特にDPI周りは触ってなくデフォルトなので「なし」なのかなと思ってますけど、どうでしょう?

    キャンセル

  • 2017/02/14 13:05

    ディスプレイの問題とか?
    そちらで検証しているディスプレイって素で横1280pxですか?
    私のほうでは横1920px推奨のディスプレイで1280pxに解像度を落とし検証しました。

    キャンセル

  • 2017/02/14 13:10 編集

    情報不足で申し訳ありません。
    こちらの環境は横1366pxがMAXなので、1280pxに落として検証しています。

    1920pxとのことで、ディスプレイが大きい場合はもしかしたらDPIが有効になっているかもしれません。
    DPIの確認方法について質問内容に追記をしましたので、確認をお願いできないでしょうか?
    ※設定を変更した場合ログオフを要求されると思いますので、ご注意いただけたらと思います。

    キャンセル

  • 2017/02/14 13:18

    確かめたところ、これも「小(100%)」になっていました。<デフォルトのまま
    1280pxに落として再度見てみても特に変更されてはいなく「小(100%)」のままでした。

    キャンセル

  • 2017/02/14 13:28

    ご協力ありがとうございます。
    同じOS、ブラウザ、解像度でも再現しないということは、まだ気付いていない設定に依存していると思いますので、OSの設定など変えていろいろ試してみます。

    キャンセル

  • 2017/02/14 13:53

    質問更新されてたので私のPCとの違いを見てみると、Win7の32bitではなく64bitであるところですね。

    sample.cssを抜いてbootstrap.cssだけの状態でも再現するのです?

    あとは全部CSS外してみて必要最低限のものだけを指定して確かめてみるとか…
    ---
    .form-control {
    display: inline-block;
    width: auto;
    max-width: 565px;
    height: 22px;
    padding: 0px 5px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    vertical-align: middle;
    }
    .form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    }
    ---

    キャンセル

+1

最新のCSSが読み込まれていないとか?
Ctrl+F5で更新してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/14 12:46

    CTRL + F5は何度も押してるので、最新のCSSは読めているかと思います。
    やはりなかなか見慣れない現象のようですか・・・。

    キャンセル

0

IEには互換モードといって古いバージョンのレンダリングを試す設定があるのですが、設定が変わって居たりはしませんでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • jQuery

    7111questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4304questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2214questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • Bootstrap

    1039questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • Internet Explorer

    300questions

    Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。