IEだけ罫線が消える

IEだけ罫線が消えてしまう現象が起きており、色んなサイトの対処法をやってみたのですがうまくいかないので教えてください。

ソースは以下です。
「〇１．これが正解です。」を罫線で囲むのですが、Edgeやchromeでは罫線が表示されますが、IE11は表示されません。

html
1
2<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3<html lang="ja">
4
5<head>
6</head>
7<body>
8
9	<center>
10		<table width="250px" style="border-collapse:collapse">
11			<tr>
12				<td colspan="2" style="background-color: #ccc;text-align:left;">
13					問題
14				</td>
15			</tr>
16			<tr style="border:1px solid">
17				<td width="50px">
18					<font color="red"><B>〇</B></font><font color="black">１．</font>
19				</td>
20				<td>
21					<a href="LevelCheck_12.html" style="display:block;text-decoration: none;color:black;text-align:left;">これが正解です。</a>
22				</td>
23			</tr>
24        </table>
25		<br>
26	</center>
27</body>
28</html>

追記
以下のように、皆様から4/27の11:32までに指摘された古いコード等を削除/修正してみましたがなぜか私のIEだけ罫線が表示されません。
IEの設定がおかしいとかあるのでしょうか？

<!DOCTYPE html> 
<html lang="ja">

<head>

</head>
<body>
        <table style="border-collapse:collapse">
            <tr>
                <td colspan="2" style="background-color: #ccc;text-align:left;">
                    問題
                </td>
            </tr>
            <tr style="border:1px solid">
                <td width="50px">
                    〇１．
                </td>
                <td>
                    <a style="display:block;text-decoration: none;color:black;text-align:left;">これが正解です。</a>
                </td>
            </tr>
        </table></body>
</html>

m.ts10806

2018/04/27 02:04

調べてみたこと、やってみたことを具体的に追記してください。また参考先サイトがあればURLも質問に追記してください。既に見た先が回答についてしまうと無駄なやり取りが発生しますし、もしかしたら参考記事の理解が間違っているために解決に至れていないのかもしれません。https://teratail.com/help/question-tips#questionTips1-2

m.ts10806

2018/04/27 02:06

ちなみに私の方のIE11では再現しませんでした。

hh_ww

2018/04/27 02:34

再現しないのですね。情報ありがとうございます。URLは多数参照したので書ききれませんが、なるべく書くようにいたします。

yoshinavi

2018/04/28 04:05

他のファイルでもtableのボーダーは表示されないのでしょうか？他のブロック要素等のボーダーは表示されているのでしょうか？ head内に「文字エンコードの指定」と、ie用で`<meta http-equiv="X-UA-Compatible" content="IE=edge">`を入れて試してみてください。

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

回答5件

シンプルに必要最低限のタグだけにしていったら、IE11でも罫線が表示できました（Codepen）。

問題点として考えられるのは、

DOCTYPE宣言が古いものになっている→<!DOCTYPE html>の、HTML5のものに切り替える
<center>や<font>、<b>など、昔のタグを使っている→これらをCSSに置き換える

などが考えられます。

投稿2018/04/27 02:05

maisumakun

総合スコア146581

hh_ww

2018/04/27 02:38

確かにCodepenでは表示されています。しかし、同じものを渡しのIEで開くと罫線がでません。コードの記載というより、IEの設定なのかもしれません。

maisumakun

2018/04/27 02:47

もしかしてですけど、IEを拡大・縮小設定にしていたりはしませんか？

hh_ww

2018/04/27 03:05

しておりません。他の方の回答にコメントしたのですが、サーバに格納した当ファイルを開くときだけ罫線が消えるようです。（そのフォルダには当ファイル以外存在しません）

x_x

2018/04/27 08:07

IE7互換モードで消えたので、 > となれば、サーバ側が互換モードのヘッダを送っている、という可能性も考えられます。が正解かも

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

単純にtrに対してCSS効かせてるからじゃないですか？
IEって、tableのセル関連で、そんなバグがあったような・・・。
tdに対して罫線のcssを効かせるようにして、
左のtdの右罫線を、右のtdの左罫線を消し、
ってやって、四角になるようにやってみてください。

投稿2018/04/27 08:01

miyabi_pudding

総合スコア9555

新しくなったコードでも再現しませんね。
自身が再現する画面のキャプチャを貼り付けてみてください。（できればIE11,Chrome両方）

ちなみに私のIE11では下記のように表示されています。

ブラウザキャッシュクリアも試してみてください。

投稿2018/04/27 02:37

編集2018/04/27 02:37

m.ts10806

総合スコア80888

hh_ww

2018/04/27 02:45

画像を貼り追記しようとしたのですが、なぜか貼れなかったです。すみません。こちらに貼っていただいた画像の罫線がない状態となります。

m.ts10806

2018/04/27 02:46

なるほど。キャッシュクリアもダメですかね？ codepenではOKと書かれていますが、別サイトなのでキャッシュも別でしょうし。

hh_ww

2018/04/27 03:03

キャッシュでもダメでした。原因がすこしわかりました。そのhtmlファイルは共有サーバに置いているファイルなのですが、そのファイルをデスクトップやローカルのフォルダに格納すると罫線が見えるようになりました。共有サーバのフォルダにはこのhtmlファイル以外には存在しないので、他のファイルが悪さをしているわけではないようです。なので、サーバーのファイルを開くとこうなる？ということのような感じです。。。

maisumakun

2018/04/27 03:07

となれば、サーバ側が互換モードのヘッダを送っている、という可能性も考えられます。

m.ts10806

2018/04/27 03:10

問題が起きていないようで起きているような　で　ちょっとモヤッとしますね。

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

border:1px solid #000とすると、線出てきませんかね？（色を指定）

そこより気になったのは、centerタグ、fontタグは、廃止または非推奨タグなので、使わないようにCSSで書き換えるところからした方がいいと思います。

投稿2018/04/27 02:07