◆ 特定条件でボーダーが消える

こんな HTML を用意します
<!doctype html>
<meta charset="utf-8" />

<style>
body {
font-family: "Yu Gothic";
}

.icon {
line-height: 1;
}

table {
width: 500px;
border-collapse: collapse;
border: solid 1px #ccc;
}

th {
background: #f0f0f0;
}

td {
background: #f8f8f8;
}

.relative {
position: relative;
}
</style>

<div>
<a class="icon">a</a>
</div>
<table>
<thead>
<tr>
<th>1</th>
<th class="relative">2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>

これを Win10 の PC で開きます
Win 10 なのは Yu Gothic を使ってるからです

表示されるのはこうなります

ie-border-lost

.relative をつけた th の上のボーダーが消えています
th の .relative を外したり body のフォントを meiryo にしたり .icon の line-height を削除するとちゃんと表示されます

フォントは Yu Gothic だけでなく 他のフォントでも起こる場合があります
もともとは フォントはアイコン表示系のものを使っていて もっと複雑な構造のページでなぜか IE でボーダーがおかしいの発見して必要ない部分を削っていった結果がこれです

IE だけでなく Edge 16 でも発生します
限定的な条件ですし この問題が存在することすら気づかれていない可能性もありそうです