absoluteとflexの要素がIEでずれてしまう

前提・実現したいこと

画像にマウスオーバーで文字がのるようにしたいと思っています。

firefoxやchromeなどのブラウザでは思った通りの表示になりましたが、
IE11（おそらく11以下も）ではマウスオーバー用の要素が画像に重なってくれず崩れてしまいます。
マウスオーバーエフェクトも表示されません。

試したこと

・画像を横並びにするために使っているinline-blockが悪さをしているのかと思い、「*display: inline;*zoom: 1;」でIE対策をしてみるが変化なし。
・IE用のベンダープレフィックスを追加してみたが変化なし。
・absoluteとflexの要素にwidthを表記すれば良いとのアドバイスを見つけ、足してみたが変化なし。

あとの対策が思いつかないので、解決法を教えていただけないでしょうか。

該当のソースコード

codepenに載せましたが下にも書きます。https://codepen.io/nul0124/pen/XWJMwmo

css
1#box {
2  text-align: center;
3}
4
5figure.hover-parent {
6  display: inline-block;
7  *display: inline;
8  *zoom: 1;
9	width: 300px;
10	height: 180px;
11	position: relative;
12	overflow: hidden;
13	margin: 0 !important;
14	padding: 0 0 30px 0 !important;
15	background: #000;
16}
17figure.hover-parent img {
18	margin-bottom: 3px;
19}
20figcaption.hover-mask {
21	width: 300px;
22	height: 180px;
23	position: absolute;
24	top: 0;
25	bottom: 0;
26	left: 0;
27	right: 0;
28	background: rgba(0,0,0,0.5);
29	opacity: 0;
30	color: #fff;
31	font-weight:bold;
32	display: flex;
33  display:-webkit-box;
34  display:-ms-flexbox;
35  -webkit-box-orient: vertical;
36  -webkit-box-direction: normal;
37  -ms-flex-direction: column;
38   flex-direction: column;
39	-webkit-box-pack: center;
40	-ms-flex-pack: center;
41   justify-content: center;
42	-webkit-box-align: center;
43	-ms-flex-align: center;
44  align-items: center;
45	text-align: center;
46	pointer-events: none;
47}
48figure.hover-parent:hover .hover-mask {
49	opacity: 1;
50}
51figcaption.hover-mask2 {
52	transition:all 0.6s ease;
53}
54
55/* */
56
57span.caption {
58    font-size: 14px;
59    text-align: center;
60	color: #fff;
61}

html
1<div id="box">
2  
3<figure class="hover-parent"><a href="#"><img src="https://placehold.jp/300x180.png" width="300" height="180" alt="" /></a><span class="caption">タイトル</span><figcaption class="hover-mask hover-mask2">ここにテキストが入ります。<br>ここにテキストが入ります。<br>ここにテキストが入ります。<br></figcaption></figure>
4<figure class="hover-parent"><a href="#"><img src="https://placehold.jp/300x180.png" width="300" height="180" alt="" /></a><span class="caption">タイトル</span><figcaption class="hover-mask hover-mask2">ここにテキストが入ります。<br>ここにテキストが入ります。<br>ここにテキストが入ります。<br></figcaption></figure>
5<figure class="hover-parent"><a href="#"><img src="https://placehold.jp/300x180.png" width="300" height="180" alt="" /></a><span class="caption">タイトル</span><figcaption class="hover-mask hover-mask2">ここにテキストが入ります。<br>ここにテキストが入ります。<br>ここにテキストが入ります。<br></figcaption></figure>
6  
7</div>

補足

マウスオーバーエフェクトはhttps://kubogen.com/web-programing-203/を参考にさせていただいていますがIE対策についての記述はありませんでした。

以下、IE11のブラウザでのスクリーンショットです。キャプションのエリアと、マウスエフェクトが全部右にずれています。
（キャプションが白文字のため見えなくなってしまっているので、一列目をマウスで選択で表示してします）

s8_chu

2019/12/21 03:52

質問文のコードを jsFiddle ( https://jsfiddle.net/owLcsup3/ ) にて動作させましたが、マウスホバー時のスタイルは正常に動作していませんか？

mupo

2019/12/21 04:05

コメントありがとうございます。codepenとjsfiddleをIEで開こうとしたらサポート対象外とポップアップが出たので、実際のIEとは表示が異なるのかもしれません…。質問文のコードを実際のIEブラウザで表示させて再確認してみましたが、やはり崩れてしまっていました。

s8_chu

2019/12/21 14:12

どのように崩れているのか、スクリーンショットをアップロードしていただけませんか？

mupo

2019/12/21 14:32

スクリーンショットをアップロードしてみました。よろしければご確認お願いいたします。

s8_chu

2019/12/21 14:43 編集

画像を提示いただきありがとうございます。画像のような状態は、こちらの IE11 では再現出来ませんでした。 > 実際のIEとは表示が異なるのかもしれません…。また、上記について、実際 jsFiddle では正常に動作していることを確認出来た、ということでしょうか？

mupo

2019/12/21 15:03

IE11で確認していただきありがとうございます！そちらの表示では問題なかったのですね…。他ブラウザと変わらない表示がされていますでしょうか？＞また、上記について、実際 jsFiddle では正常に動作していることを確認出来た、ということでしょうか？ IEに対応していないというポップアップは出ますが、s8_chuさんのjsFiddleは正常に動作していることが確認できました。 IE11で確認していただいて表示に問題がないとのことであれば、こちらのIEブラウザの問題なのかもしれませんので、考え方を改めようと思います。

multiplera

2019/12/21 16:21

こんにちは. mupoさんが省略されているソースコードなどがあれば, それらを含めた情報を提供して頂く事は可能ですか ?

mupo

2019/12/21 19:17 編集

コメントありがとうございます。 multipleraさんの言葉を見て省略していたheaderを確認していたところ「<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />」という表記が目に留まり、気になって削除→IE11ブラウザでも正常に表示されるようになりました。中身の部分にだけ頭がいっていたので、気づかせてくださりありがとうございます。調べてみたらIEの互換モード用の表示崩れ対策のようですが、IE11からはなくなったと出てきました。 s8_chuさんにも細かく見ていただいて、大変助かりました。お二人ともありがとうございました。