研Q132.IEで文章の枠囲いが表示されない！？そりゃ困ります。

<div>タグでもオプションを指定する方法が違うとダメらしい。

 Cosmos by 663highland via：Wikimedia Commons

花梨さんはいつもブログに誕生花の案内を枠で囲んで書いていらっしゃいます。
ある日、枠をいつもと変えてみたらIEで枠が表示されなくなってしまったそうです。

その日の記事を梨花さんが使っていらっしゃるGoogle chromeで表示した画像が
↓これです。



同じ記事をIE（インターネットエクスプローラー８）で表示したのが
↓これです。



写真の装飾につけてある縁取りの角が円くなっているところと、写真の影は
HTTML5/CSS3をサポートしていないIE8で表示されないことはわかっていますし、
そう大きい問題ではないと思います。

しかし、全体を濃い青色の線で囲ってある枠線がIEではぜんぜん表示されていません。


この枠線はブロックタグ（<div>タグ）のオプションでつけてあるものなので、
何も表示されないのは実に困ります。

それに、何も表示されないのでは枠で囲んだ意図とまったく違う結果になってしまいます。


そもそも、ブロックタグ（<div>タグ）はHTMLの基本的なタグなのでIEでも表示されるはずだと思っていたのですが、オプションのつけ方によっては表示されない場合もある
というのは青天の霹靂でした。

僕自身、<div>タグにオプションをつけて枠で囲む方法を過去記事で研Qしたことがあるので
⇒ 研Q5.文章を枠で囲む方法（HTML<div>タグのstyle属性で色､太さ､線種など自由自在に）
問題の内容を知っておく必要があります。


梨花さんご自身は、オプションのつけ方を以前どおりに戻されて事なきを得ていらっしゃるようですが、
どのオプションまでならIEでも表示されて、どのオプションをつけると表示されなくなってしまうのか、その限界ラインを僕自身は知っておく必要があります。


ということで、梨花さんの花言葉と似たような表示をして、オプションをひとつずつ付け足し、どんなオプションを追加したときにIEで表示できなくなるのかを調べてみました。

問題は、オプションの指定方法だった。

梨花さんの記事のHTMLソースをコピーして．htmlファイルとしてテキスト保存し、そのファイルをIEで表示してみると、やはり濃い青の枠線は表示されません。

オプションをすべて削除して、枠の線種は実線、枠の太さは2px、枠線の色は濃い青、
というぐあいにオプションをひとつずつ追加して、その都度IEで表示してみました。

その結果、オプションをぜんぶ追加しても↓ちゃんと表示されてしまったのです。

         ９月27日の誕生花はコスモスです.　　　




花言葉は「乙女の真心」です

 Cosmos by 663highland via：Wikimedia Commons

画像はCCライセンスがついているものをお借りして、画像の装飾は
研Q58.ブログの画像の周りにHTMLで枠線（border）をつける方法。で研Qした方法で、
梨花さんの記事と似た雰囲気になるようにしてみました。

今回調べたかったのは、外側の濃い青い枠の部分だけだったので写真の装飾は梨花さんと同じ方法を使わなくても問題はないでしょう。

実際にやってみてIEで装飾されなかったタグと装飾されたタグの違いは
オプションの指定方法の違いでした。

表示されたほうは、枠の線種は実線、枠の太さは2px、枠線の色は濃い青というぐあいにオプションをひとつずつ指定したのですが、

表示されなかったほうは、「実線で太さが2pxで色が濃い青の枠をつける」と、まとめて指定していたのです。

たったこれだけのことなのに、IEはなんて堅物なヤツだ！とも思いますが、プログラムは堅物なヤツです。

Google chromeはこういうまとめて指定する方法も容認していたけれども、IEでは容認しきれなくなって枠を引くという指定全体を無視されてしまったとも言うことができます。

とりあえず、過去記事に書いたことがウソではなかったということがわかって嬉しかったし、
仕入れてあったノウハウをもう一度修正しなくてもよかったということがわかりました。


おさらいをするきっかけをくださった梨花さんには感謝いたします。<(_ _)>


外部リンク：
・▼ブラウザを変えて試す｜☆５０代を輝かせる☆～人生はこれからよ

関連記事:(別窓で開きます)
研Q5.文章を枠で囲む方法（HTML<div>タグのstyle属性で色､太さ､線種など自由自在に）
研Q58.ブログの画像の周りにHTMLで枠線（border）をつける方法。

にほんブログ村

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
　　

ツイッター でも、更新案内を流しています。　　　　　　　　　　　　　　　　　　　　　　　　　　

RSSリーダーとは？⇒ ＲＳＳってなんなの？

　　リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。

▲ネットビジネス研Ｑ室のトップページに戻る▲　　●ネットビジネス研Ｑ室の記事一覧●

記事末尾200posted by +M Inamura (水村亜里)