2019年10月26日

ホームページってブラウザによって見え方が微妙に違います。
最近ではＩＥ環境での見え方が、他のブラウザと違うことが顕著になってきています。
マイクロソフトとしてもＩＥを使うことを推奨していないし、将来的に無くなるブラウザではあるのですが、使っている人が一定割存在する以上、対応しないとまずいです。

特にスマートフォン対応のためにflexboxを使った場合の違いが大きいです。
文字が列をはみ出して画面が崩れます。

</head>の上に
@media all and (-ms-high-contrast: none){p.resizeimage{
max-width: 350px;
}}
を入れると、ＩＥ環境の場合のみ、
p.resizeimage{max-width: 350px;}
が有効になります。

各列に400px幅のhaba400.gifという画像を挿入して
<img src=”haba400.gif” width=”400″ height=”1″ border=”0″>
と記述すると400px幅の列ができます。

そのままだとＩＥ環境の場合は列幅の指定がうまくいかなく、文字だけはみ出るようになります。
<p class=”resizeimage”><img src=”haba400.gif” width=”400″ height=”1″ border=”0″></p>
のようにしてＩＥ環境の場合のみ350px幅の列に指定できるようになり、文字がはみ出ないようになります。なお、350とか400は自分の環境に合わせて設定します。

2019年10月27日

ＩＥで他のブラウザと違う見え方がするということで、改めてＩＥで自分のサイトを見てみました。
幅の広さが指定通りに、表示されていないのやら、罫線の色が黒くなっているのやら、いろいろ不具合が見つかりました。

罫線については
<TABLE bgcolor=”#fbe48c” >
<TBODY>
<TR>
<TDbgcolor=”#fdebd0″></TD>
</TR>
<TR>
<TDbgcolor=”#ffffff”></TD>
</TR>
</TBODY>
</TABLE>

という手法で色付きの罫線を表示していたのですが

スタイルシートの設定（</head>の上に）で

.line{
border: solid 1px #fbe48c;
}

を登録して
<TR class=”line”>
で罫線を入れるのに変更して解決しました。