ブラウザによってCSSの解釈(挙動)が違う原因と対策
タイトルだけ見ると「どれだけ偉そうな内容」かと思っちゃいますが、これは検索エンジンを意識したタイトルにしてみました。理由は私みたいな人用でしょうか。
っと言うのも私ブラウザの「標準モード」「互換モード」の存在を昨日初めて知りました(汗)そんな事も知らずに「XML宣言」をし「DOCTYPE」も好きなように記述し、挙句の果てにCSSの挙動の違いの主な原因は「ブラウザエンジンの違い」程度にしか考えてませんでした。
っと言うより周りでPC詳しい人居るわけじゃないんで基本「自力」が災いしたのでしょう。(本すら見ない&持ってない)WEB2.0仕様な人間です。結局分からない事はネットで調べてきちゃってるんで「標準モード」「互換モード」と言う単語すら知らなかったわけで、検索に使ってきたキーワードは、
- CSS ブラウザ バグ
- CSS 挙動 違い
ま、他にも様々ですが解決に結びつきそうなキーワードは使ってなかったわけです。今となっては新たな知識(後方互換モード)が今までのCSSの苦労をかなり解決してくれました。巷の(~バグ)とか大して理解してませんでしたしね。ようするに
「XML宣言」をすると「IE6」は表示がおかしくなる
これが分かっただけでも大収穫でした。じゃ~「XML宣言」を外せば良いと言うのも又違うわけで。「UTF-8」とかなら「XML宣言」外しても良いようですが、「XML宣言」した状態でどうにか問題なく表示させるには?
と調べまくると「width、height」と「padding、border」を一緒に記述しないとか、根本的な部分が明らかに違ってしまう回答が多数。これを実行に移すにはHTMLやらCSSを大幅に修正しなくちゃならなくなるので、とんでもない改装が必要になってしまいます。
それを又調べまくってると「Movable Type」などでPHP化している方々の解決策がちょこちょこ載ってました。今までPHP化の場合の「XML宣言」の注意事項といえば、
- <?php echo"<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n"; ?>
とか「echo」で対処する位しか目にいった事が無かったので。んで「@styleさん」の「記事」にありました。PHPの宣言切り替えの方法が!※追記:コピペだとIE全部XML宣言が消えましたので勝手に修正しました。PHPは自信無いのでお好きなほうをお使い下さい。
@styleさん原文
- <?php
- $ua = $_SERVER['HTTP_USER_AGENT'];
- if ((ereg("Windows",$ua) > 0) && (ereg("MSIE",$ua) > 0)) {
- if (ereg("MSIE 6.",$ua) > 0) {
- echo '';
- }
- } else {
- echo '<?xml version="1.0" encoding="Shift_JIS"?>'."\n";
- }
- ?>
勝手に修正版
- <?php
- $ua = $_SERVER['HTTP_USER_AGENT'];
- if ((ereg("Windows",$ua) > 0) && (ereg("MSIE 6.",$ua) > 0)) {
- echo '';
- } else {
- echo '<?xml version="1.0" encoding="Shift_JIS"?>'."\n";
- }
更に追記:「検索エンジンSEO-SOさん」のお陰で更にスリム化出来ました。こっちのが良いと思うんで使うならこちらをどうぞ~。(普通にif文だけでも良さげですか)
SOさん版
- <?php
- $ua = $_SERVER['HTTP_USER_AGENT'];
- if (ereg("MSIE 6.",$ua) > 0) {
- echo '';
- } else {
- echo '<?xml version="1.0" encoding="Shift_JIS"?>'."\n";
- }
取りあえずブラウザのユーザエージェントで切り替えるって事ですね。ちなみに「ユーザエージェント」って発想も無かったです。日常で「HTTP_USER_AGENT」なんて単語飛び交うことも私には無いですしね(笑)
私のサイトは結構PHPで作ってる部分が多かったのでこれは助かりました。が!Yomi-SearchはPerlです。ここでプログラミングが出来る人は「似たようなもん」って事ですぐなんでしょが私はど素人。しかもPerlの「XML宣言」の切り替えのが又どこにも無いんです(涙)
SSIとかありましたがそんなの使ったこともありません。って事で携帯振り分けみたいなのから見よう見真似で自作しました。相当「勘」で作ったので微妙かもです。
- local($ua);
- $ua = $ENV{'HTTP_USER_AGENT'};
- if (index($ua, 'MSIE 6.') >= 0 ) {
- print "";
- } else {
- print "<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n";
- }
PHPのと比べると「Windows」とか「MSIE」とか足らないんですが良いんでしょうか?(汗)一応動いてますが、必要だから記述してるわけですよね?緊急避難用に書いちゃったんで詳しい方居たら・・・。な~んて「教えて君」は嫌いなんですが間違いがあれば指摘下さい(汗)
ま~兎に角これで「IE6」の方には「kazuking search」が多少私が思ったとおりのデザインをお見せできるようになったのではないかと思います。ちなみに私の周りでの考えですが「IE6」ってネットサーフィンとかちょっとブログやってる感じのPC詳しくない方が多く使ってる感じがします。
私のまわりには「IE7」はおろか「タブブラウザ」とか知らない人間は「ざら」です。「mixi」知らない奴まで居たりします。ま、三十路近い頭の悪い集団はそんなもんです。ネットサーフィン以外の事をパソコンでやってるだけで「秋葉系」扱いですからね(汗)
だからWEB製作してんの秘密にしてます(笑)
さてさて。上記は根本的な解決じゃないので今後作るサイトだと、どうしたもんかなと考えてます。バグやハックを利用してCSSを記述するか、ボックス要素に「width padding」を一緒にしないとか。悩みの種は尽きません。って事で仕事行って来ます♪
Recent Comment