IE 11 で border が消える
◆ 特定条件でボーダーが消える
こんな HTML を用意します
これを Win10 の PC で開きます
Win 10 なのは Yu Gothic を使ってるからです
表示されるのはこうなります
.relative をつけた th の上のボーダーが消えています
th の .relative を外したり body のフォントを meiryo にしたり .icon の line-height を削除するとちゃんと表示されます
フォントは Yu Gothic だけでなく 他のフォントでも起こる場合があります
もともとは フォントはアイコン表示系のものを使っていて もっと複雑な構造のページでなぜか IE でボーダーがおかしいの発見して必要ない部分を削っていった結果がこれです
IE だけでなく Edge 16 でも発生します
限定的な条件ですし この問題が存在することすら気づかれていない可能性もありそうです
<!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>
<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 を使ってるからです
表示されるのはこうなります
.relative をつけた th の上のボーダーが消えています
th の .relative を外したり body のフォントを meiryo にしたり .icon の line-height を削除するとちゃんと表示されます
フォントは Yu Gothic だけでなく 他のフォントでも起こる場合があります
もともとは フォントはアイコン表示系のものを使っていて もっと複雑な構造のページでなぜか IE でボーダーがおかしいの発見して必要ない部分を削っていった結果がこれです
IE だけでなく Edge 16 でも発生します
限定的な条件ですし この問題が存在することすら気づかれていない可能性もありそうです