IEでtableのborderが消えた話

症状

• table の td ないし th にbackground-color と border を一緒に設定すると、borderが見えなくなる。
• しかし開発者ツールなどでbackground-colorを消してやるとborderが見えるようになる

参考コード

html

<table>
	<tbody>
		<tr>
			<th>見出し1</th>
			<th>見出し2</th>
		</tr>
		<tr>
			<td>内容1</td>
			<td>内容2</td>
		</tr>
	</tbody>
</table>

sample.scss(SCSS記法)

tr {
	th {
		background-color: #f00;
		border: 1px solid #000;
		color: #fff;
	}
	td {
		border: 1px solid #000;
	}
}

確認機種

• IE9 - 11。
• Firefox47(情報提供ありがとうございます！)

解決策

• td ないし th に position: relative;がかかってないかを確認する。
• かかってたら無効化すると治る。

別担当が *{position: relative;} とかやってくれてたおかげで引き起こされたようでした。
他の人に迷惑かけちゃダメ絶対。

参考：http://stackoverflow.com/questions/31030579/css-background-color-overlapses-with-border-on-table-cell-in-ie