IE11のバグ-border-radiusによる謎の隙間

前提・実現したいこと

divボックスを並べた際、IE11だけわずかな隙間ができるのをきれいに埋めたい。
ネガティブマージンを入れることで一応解決はしましたが、ほかにもっとスマートな解決方法はないでしょうか。

発生している問題・エラーメッセージ

divボックスを並べた際、IE11だけわずかな隙間ができる。
border-radiusを使った時に、その現象が現れます。

該当のソースコード

<body>
<div class="up">ほげほげほげ</div>
<div class="down">ほげほげほげほげほげ</div>
</body>

body {
	width: 50%;
	margin: 0 auto;
	padding: 50px;
}
.up {
	width: 100%;
	margin: 0;
	padding: 20px;
	color: #ffffff;
	background-color: #87A54F;
	border-radius: 10px 10px 0 0;
}
.down {
	width: 100%;
	margin: -1px 0 0 0;
	padding: 20px;
	color: #ffffff;
	background-color: #7FAFC9;
	border-radius: 0 0 10px 10px;
}

試したこと

.down {margin: 0;}にすると1pxより小さな隙間が見られます。
（上記は上だけ/下だけ角丸にしてますが、全体角丸にしても同じ）
なので上記のようなネガティブマージンにすることで解決。

m.ts10806

2019/07/26 07:31

IE11は捨てる・・というわけにはいかないんでしょうか

TemmeiYamada

2019/07/26 07:33

ターゲットの利用ブラウザがIE11がメインなんですよ。恐ろしいことに。。。（おじいちゃんばっかりなのでｗ）

m.ts10806

2019/07/26 07:35

なるほど。できればなんとか丸め込みたいですね（Win7サポート終了後は変わってくれるといいなあ）あまりスマートとは言えないのでこちらに書きますがIE11だけのCSSハックはあるようです https://nelog.jp/ie11-css-hack

TemmeiYamada

2019/07/26 07:42

ありがとうございます！ border-radiusのieバグは今まで見たことなかったので（調べてもなかなか出てこなかったので）、一応解決したけど、情報共有の意味も込めてアップさせてもらいました。ネガティブマージンとかなるべく使いたくないですよね。

m.ts10806

2019/07/26 07:44

>ネガティブマージンとかなるべく使いたくないですよね。そうですね。どうにもならないときの最終手段だと思います。（ただ、意図して使う場合もあるので、それはそれで別です）

kei344

2019/07/26 08:11

まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。

yoshinavi

2019/07/26 10:14

私の環境（win7、win10のie11）で、提示コードを確認しましたが、隙間は出来ませんでした。今回とは少し違いますが、過去質問（https://teratail.com/questions/86704）では、違うブラウザですが、デバイスによる隙間の有無がありました。ネガティブマージンでの対策は、意見が分かれる部分でもありますが、個人的には「使ってOK」派です。

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

回答2件

あまり気にしすぎないほうがいいのではないかなと思います。
例

CSS
1.up {
2    border-bottom: 0.5px solid #87A54F;
3}

投稿2019/07/26 08:14

x_x

総合スコア13749

TemmeiYamada

2019/08/02 02:45

なるほど。ボーダーを入れる方法ですか。やってみます。ありがとうございます。

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

自己解決

mts10806様より教えていただいたie11のハックを施してみました

.down {
width: 100%;
margin: 0;
padding: 20px;
color: #ffffff;
background-color: #7FAFC9;
border-radius: 0 0 10px 10px;
}
@media all and (-ms-high-contrast:none){
::-ms-backdrop, .down { margin: -1px 0 0 0; } / IE11 */
}