いろいろ備忘録日記

主に .NET とか Go とか Flutter とか Python絡みのメモを公開しています。

IEで二重罫線とドット罫線を利用すると表示が変? (IE, CSS, border, dotted)


知人がハマっていたので、ついでにメモメモ。
以下のようなHTMLを作成して、それをIEで表示させると
二重罫線の下に出るドット罫線の幅がおかしくなるという件です。
(chromefirefoxなどでは大丈夫でした。)

<html>
	<head>
		<title>table border bug?</title>
		<style type="text/css">
			table {
				border-collapse: collapse;
				border-spacing: 0px;
			}
			
			th {
				width: 200px;
				border: 1px solid #000;
			}
			
			td {
				border: 1px solid #000;
			}
			
			td.value {
				width: 160px;
				text-align: right;
				border-right: 1px dotted #000;
			}
			
			td.mark {
				width: 40px;
				text-align: center;
				border-left: none;
			}
			
			td.total {
                                /* この下のCSSをコメントアウトするとうまく表示される */
				border-top: 3px double #000;
			}
		</style>
	</head>

	<body>

		<table>
			<tr>
				<th>head1</th>
				<th colspan="2">head2</th>
			</tr>
			<tr>
				<td>data1</td>
				<td class="value">123</td>
				<td class="mark">OK</td>
			</tr>
			<tr>
				<td>data2</td>
				<td class="value">3</td>
				<td class="mark">NG</td>
			</tr>
			<tr>
				<td class="total">total</td>
				<td class="total value">126</td>
				<td class="total mark"></td>
			</tr>
		</table>

	</boby>
</html>


標準の倍率で表示すると以下のように見えます。
(画像が小さすぎて見えない・・・・すみません)
(追記:拡大してみた。)


IE7,IE8,IE9と試してみたのですがどれも上記のようになります。
(追記:IE6のみ、ちゃんと表示されました。)
でも、ブラウザ上で拡大していくと実はちゃんとドット罫線は
ほかの部分と同じようになっているのですが、なぜか標準倍率だと
このようになるみたい・・・。


で、二重罫線を施している部分を外すとちゃんと表示されるようになります。
具体的には、以下の部分。

			td.total {
                                /* この下のCSSをコメントアウトするとうまく表示される */
				border-top: 3px double #000;
			}

コメントアウトして表示すると以下のようにちゃんと見える。

なんで?


知っている方いらっしゃったらご教授ください。m(_ _)m


================================
過去の記事については、以下のページからご参照下さい。