研Q132.IEで文章の枠囲いが表示されない!?そりゃ困ります。 - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

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

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


クリエイティブ・コモンズ 表示 - 継承 3.0 非移植 Cosmos by 663highland via:Wikimedia Commons


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

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

GoogleChromeで表示した枠囲い

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

IEで表示した枠囲い

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

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


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

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


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

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


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


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


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

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

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

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





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




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









クリエイティブ・コモンズ 表示 - 継承 3.0 非移植 Cosmos by 663highland via:Wikimedia Commons



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

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

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

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

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

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

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

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


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


外部リンク:
▼ブラウザを変えて試す|☆50代を輝かせる☆~人生はこれからよ

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

 

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

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

RSSリーダーとは?⇒ RSSってなんなの

  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

びっくりしました^^

水村さんの記事が更新されたので
訪問させていただいたら、私の発信した記事の事だったので。


色々、検証いただきありがとうございます。


簡単なHTMLが分かってきただけで
後はちんぷんかんぷんなのでとても助かります。

ありがとうございました^^/

2013-09-26 19:38 | from 花梨です

>梨花さん

Re:びっくりしました^^
梨花さん、驚かせてごめんなさい。 ≪返信fromミナムラ

いえ、僕も梨花さんの記事を拝見してかなり驚いたのです。

題材をいただいてありがとうございました。

>水村さんの記事が更新されたので
って、RSSを登録していただいてありがたいです。
アメブロのチェックリストに表示されなくても
RSSだと気づいていただけるんですね。

2013-09-27 10:20 | from 水村亜里 | Edit

トラックバック

http://aminamura.blog.fc2.com/tb.php/132-f8bd9947

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。