xamppで公開しているサイトをIEで見るとき、localhostだと正常だがPC名だと異常になる

下のようなHTMLを作成しています。bgimg.jpgは、ブラウザを最大化した時ブラウザより小さい画像です。

HTML
1<head><style>
2	body{
3		width: 100vw;
4		height: 100vh;
5		background-repeat: no-repeat;
6		background-position: center;
7		background-image: url('bgimg.jpg');
8		background-size: cover;
9		background-attachment: fixed;
10	}
11	div{
12		background-color: rgba( 0, 0, 255, 0.6);
13	}
14</style></head>
15<body>
16<div>test</div>
17</body>

xampp v3.2.2 (win7 32bit portable)をインストールしているPC(名称：pcname)で
上のファイル(debug.html)をC:\xampp\htdocs直下に置きました。
ここで、次の場合、次の画像のように、望ましい結果になります。

しかし、PC名指定してIEからみると、cssが適切に反映されません

http://pcname/debug.html　をIE11で見る場合

以下の点に困っています。

縦横幅いっぱいまで広げるcssが動作しない
testという文字を入れているdivの半透明背景色が反映されない

xamppの設定は、インストールしてそのままの状態です。
PC名指定してIEからみた場合にも正しくCSSが動作するようにするためには、どのように記述すべきでしょうか。

Y.H.

2019/12/04 05:25

http://pcname/debug.html http://localhost/debug.html それぞれ表示したときのIEのドキュメントモードや互換表示設定は同じですか？(IE11になってますか？)

tokita.

2019/12/04 05:32

Y.Hさん　素晴らしい指摘ありがとうございます。 pcnameの場合、ドキュメントモードが5(規定)(イントラネットの互換設定から)になっていました。とりあえず手動で修正したところ、意図した表示になりました。今からどのようにソース/設定に反映するのか調べます。

行動規範の内容に同意します

回答2件

自己解決

Y.H.様からご指摘いただいた通り、イントラネットを表示するとき互換モードになることが原因でした。
参考サイトを参照して、HEAD内に

html
1<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

を追加したところ、正常に動作するようになりました。

投稿2019/12/04 05:42

tokita.

総合スコア61

Y.H.

2019/12/04 05:52

IEのみでcssやjavascriptが怪しい動きをしているときは、まずドキュメントモードを確認するといいですよ。

tokita.

2019/12/04 05:57

実は当初<header>タグがなぜか動かなくて<div>に書き換えるというような処理もしていました。まるで古いIEを使っているみたいだなあとは感じていましたが古いIEとして表現するモードがあり、ましてや勝手に設定されるという知識は欠片ほどもなく…。勉強になりました。今後よく確認していきます。

行動規範の内容に同意します

CSS
1    body{
2        width: 100vw;
3        height: 100vh;
4        background-repeat: no-repeat;
5        background-position: center;
6        background-image: url('http://pcname/bgimg.jpg');
7        background-size: cover;
8        background-attachment: fixed;
9    }
10    div{
11        background-color: rgba( 0, 0, 255, 0.6);
12    }

か

CSS
1    body{
2        width: 100vw;
3        height: 100vh;
4        background-repeat: no-repeat;
5        background-position: center;
6        background-image: url('/bgimg.jpg');
7        background-size: cover;
8        background-attachment: fixed;
9    }
10    div{
11        background-color: rgba( 0, 0, 255, 0.6);
12    }