スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
拍手+簡易メッセージ送信
--:-- | スポンサー広告 | page top↑
borderも足すのか!
 こんにちはスタイルシートのpadding要素のブラウザによる解釈の違いに昨日初めて気が付いて顎が外れそうになりました管理人です。
 と言ってもHTMLをいじらない方にはなんのこっちゃやらだと思われますので少し解説を加えますと、WEBページを作るためのプログラミング言語HTMLには「互換モード」と「標準モード」というのが存在して……いることすら情けなくも管理人は昨日知ったのですが、まぁそんな2つのモードが存在して、平たく言えばモードによって同じHTMLを書いていても表示のされ方が違ってしまうことがあるのです。
 どっちのモードで表示するかはHTML内の記述でブラウザ側が解釈してくれます。
 今まで当サイトでは、ちゃらんぽらんブラウザ代表InternetExplorerで互換モード、きっちりブラウザ代表Firefoxで標準モードが採用される中途半端な指定をしておりました。まぁ表示の差と言っても微々たるものなので、かっちりした見栄えを追及しないうちのようなサイトではそれほど影響はなかったのです。
 んが。
 昨日進めていたページデザイン変更で、変な気を起こしてちょっとかっちりしたデザインを試みてしまったために、そしていつも通りIEで確認をしていたために。

 「あ、そういえばFireFoxでも確認しとかなきゃ」→「ぽちっとな(FF起動、作業ページオープン)」→「衝撃的デザインを目撃」→「ぎゃー!」

 ……と作業進行度3分の1時点でそんな事態になったのでしたとさ。
 ただ読む分には全く問題ない崩れ方で、衝撃と言うより笑撃な構図を数時間UPしたままにしておりました。あーしまった、スクリーンショット撮っておくんだったあのだるま落としデザイン。
 仕方がないので該当する37ページをIEでも標準モードで表示されるようにして打ち直し……。作った画像を破棄することなくHTMLの修正だけで済んだのは不幸中の幸いでありました。
 一体どこでつまづいたかと言いますと、冒頭にも書きましたが、ページの表示を制御するスタイルシートという文書の雛形のpadding=余白の設定をする要素の解釈の違いです。
 これまたややこしいので詳しい解説はこちらあたりを参考に……手抜き万歳人間。
 あ、ついでにモードについての参考はこちらで。

 いやはや参りました。
 でも互換・標準モードに気付けたのは僥倖で、時間があるときにサイト全体を標準モードで直していこうと目標が出来ました。
 互換モードを切ると古いブラウザでの表示がネックになっちゃうけど、クロスブラウザへの対応だけで手一杯……; と言っても確認しているのはIEとFFだけで、Macでの確認はちっとも出来やしないのですが。
 しかしなー。IEの方がヘンテコな表示をしているのは承知だけど、paddingの違いは標準の方がむしろ納得行かないなー。幅+余白=本来の幅って面倒だよ!

 記事が長くなったので(そして日付が変わったので……)デザイン変更自体のどたばたについてははまた後日。
スポンサーサイト
拍手+簡易メッセージ送信
23:55 | サイト・創作 | トラックバック(0) | コメント(0) | page top↑
| ホーム |
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。