IE11でのみbackground-colorに余計な隙間ができてしまう。

下記のコードは背景画像に文字と文字の背景に透過の白色を使っています。
ただし、IE11だと下記の画像のように下に隙間がかなり空いてしまいます。
IE11でも他のブラウザと同じレイアウトにするにはどうしたらいいでしょうか？
IEではheightはおかしな挙動をすると聞いたのでなるべく多用しないようにしてみました。
レスポンシブに対応するためにwidthやpaddingにvwの単位の数値をつけています。

＜IE11＞

＜その他ブラウザ＞

＜HTML＞

<!-- main_box -->
<section id="main_box">
  <p><span class="title_span">TEST PAGE</span><br>
    <span class="eng_title_span">テストページ</span></p>
</section>
<!-- main_box -->

＜CSS＞

#main_box {
	width:100%;
	height:300px;
	background-image:url("../img/test.jpg");/*W1400px X H300px*/
	-webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
	display: -webkit-flex;
	display: flex;
}

#main_box p {
	margin-top:40px;
	text-align:center;
	background-color: rgba(255,255,255,0.7);
	margin-bottom:40px;
	width:50vw;
	padding-left:25vw;
	padding-right:25vw;
}

#main_box .title_span {
	font-size:6vh;
	color: #43A1E1;
	font-weight:bold;
}

#main_box .eng_title_span {
	font-size:4vh;
	font-weight:bold;
}

「試したこと」

#main_box p {
	margin-top:40px;
	text-align:center;
	background-color: rgba(255,255,255,0.7);
	margin-bottom:40px;
	width:50vw;
	padding-left:25vw;
	padding-right:25vw;
}

こちらのCSSに下記を追加しましたが変化がありませんでした。