Q&A
Windows7およびIE11のバージョンを記載してください
HTML5、Bootstrapにてページを作成しています。
IE11でテキストフィールドにフォーカスを当てた際に、謎の事象が発生しました。
１．枠線の影が消える
２．テキストフィールドの左上にグレーの影が表示される
この現象は下記の環境で発生しています。
・Windows7 Professional SP1（32bit）
・IE 11.0.9600.18537 (更新バージョン 11.0.38(KB3203621)
・画面解像度 横：1280px
・DPIなし（詳細は質問の最後に記載）
Windows10のIE11やEdge、Chrome等では発生していません。
また、1280px以外の解像度では発生していません。
上記現象が再現できる状態のものを以下のサイトにアップロードしています。
現象自体はテーブルやテキストフィールドの横幅を変えれば発生しなくなるのは分かっています。しかし、テーブルの作り方によっては画面解像度横1280px以外でも発生するのではないかと危惧しています。
IEの不具合ではないかと疑っているのですが、同じようなことが発生する文献がある等、何か知恵や情報をいただけないかと思っています。
※※※※※※DPIなしの確認方法について※※※※※※
①デスクトップを右クリックし「画面の解像度」を選択
②「テキストやその他項目の大きさの変更」を選択
③ラジオボタンが・「小（100%)」になっているか
以上、宜しくお願いします。
質問を編集いたしましたので、お手数ですが宜しくお願い致します。
stackoverflowへも投稿したようですが、下のヘルプにもあるようにマルチポストは推奨されていません。ご一読ください。
回答3件
0
私の環境(Win7、IE11)で確認してみましたが再現しませんね…
正常に見えています。
投稿2017/02/14 01:43
総合スコア2722
本当ですね。うまくいっているようです。
ちなみにですが、windowsの画面の解像度の横幅は1280pxでしょうか？？
こちらでは5台程度メーカー違いのWindows7 + IE11があるのですが全て再現しているもので・・・。
はい、解像度を1280pxにして試してみました。
「DPIなし」がよく分からないのでスルーしてますが、特にDPI周りは触ってなくデフォルトなので「なし」なのかなと思ってますけど、どうでしょう？
ディスプレイの問題とか？
そちらで検証しているディスプレイって素で横1280pxですか？
私のほうでは横1920px推奨のディスプレイで1280pxに解像度を落とし検証しました。
情報不足で申し訳ありません。
こちらの環境は横1366pxがMAXなので、1280pxに落として検証しています。
1920pxとのことで、ディスプレイが大きい場合はもしかしたらDPIが有効になっているかもしれません。
DPIの確認方法について質問内容に追記をしましたので、確認をお願いできないでしょうか？
※設定を変更した場合ログオフを要求されると思いますので、ご注意いただけたらと思います。
確かめたところ、これも「小（100%)」になっていました。＜デフォルトのまま
1280pxに落として再度見てみても特に変更されてはいなく「小（100%)」のままでした。
ご協力ありがとうございます。
同じOS、ブラウザ、解像度でも再現しないということは、まだ気付いていない設定に依存していると思いますので、OSの設定など変えていろいろ試してみます。
質問更新されてたので私の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);
}
---
0
最新のCSSが読み込まれていないとか？
Ctrl+F5で更新してみてください。
投稿2017/02/14 03:37
総合スコア1939
0
IEには互換モードといって古いバージョンのレンダリングを試す設定があるのですが、設定が変わって居たりはしませんでしょうか？
投稿2017/02/14 15:39
総合スコア1939
あなたの回答
tips
プレビュー
