質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

5回答

16404閲覧

IEだけ罫線が消える

hh_ww

総合スコア22

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

2クリップ

投稿2018/04/27 01:41

編集2018/04/27 02:33

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

ソースは以下です。
「〇1.これが正解です。」を罫線で囲むのですが、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">1.</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"> 〇1. </td> <td> <a style="display:block;text-decoration: none;color:black;text-align:left;">これが正解です。</a> </td> </tr> </table></body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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">`を入れて試してみてください。
guest

回答5

0

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

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

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

などが考えられます。

投稿2018/04/27 02:05

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

0

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

投稿2018/04/27 08:01

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

IE11での再現確認

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

投稿2018/04/27 02:37

編集2018/04/27 02:37
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

0

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

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

投稿2018/04/27 02:07

kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kszk311

2018/04/27 02:07

ちなみに僕の環境でも線は出ていました。
hh_ww

2018/04/27 02:36

ありがとうございます。#000についても確認してみたのですが表示されませんでした。追記しましたが、非推奨タグ等をとっぱらってもだめでした。
guest

0

自己解決

htmlファイルを共有サーバに置いたままファイルを開くと、サーバ側が互換モードのヘッダを送っているために起きた現象でした。
htmlファイルをローカルにおいてファイルを開くことにより問題は解決しました。

投稿2018/05/07 04:24

hh_ww

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問