IEの不可思議な現象

Twitter Bootstrap(TB)を使ってサイトの構築をよくするのは、過去の記事でも書いていたのですが、
そんな中、IEのみでおこる不思議な現象をご紹介。

PHP+MySQL+TBでとある管理画面を構築中のこと・・・

本来はWindows上でhttpdを立ち上げて動作させる予定だったのですが、サーバーが間に合わなかったのでレンタルサーバー上で構築して動作確認をしていました。

レンタルサーバー上での動作確認も一通り終わったところで、実際にWindows上で動かそうと思ったときに、以下の様な現象が起きました。

 

test

 

上の様に表示されなければならないところ、なぜか下の様にデザインが一部崩れて表示されていました。

最初はWindowsのことだから、bootstrap.min.cssなど、「min」のついたファイルを扱えないのかな?と思いました。
事実、minファイルをテキストエディタで開こうとすると、1行の文字数が多すぎて、途中でカットされてしまっているから。
でも、「bootstrap.css」など、「min」ではない方のcssやjsを読み込んでも表示は変わらず・・・

ちなみに、Windows側の環境は、Windows7 Professional + xampp3.1.0
インストールしただけでは、MySQLの文字コード違いで、出力時にエラーが出たので、テーブルの文字コード変換だけ行いました。

これで丸1日悩みました。
わけがわからず頭を抱え、とりあえずどの環境でエラーが出るのかを確認しましたが、以下の様になりました。

ブラウザ InternetExplorer Chrome FireFox Opera Safari
レンタルサーバー
Windows+xampp ×

みごとにWindows環境の時のIEだけ!!
もうわけがわかりません。
仕方がないので、ソースを見直してみることにしました。
PHPも組み込んでいるので、若干見づらいですが、特にへんな記述をしているところもありません。
まぁ、変だったら他の環境で同じようになってるはずだし・・・

今度はIEに表示した状態で、ソースを表示してみました。
すると・・・

noie3

あれ?1行目の最初に半角スペースっぽいものが入ってる・・・
ここはPHPで記述している部分ですが、当然半角スペースをはき出す様になんてしてません。
結局PHPより先にDOCTYPEを宣言すると、この現象はなくなりました。

IEは余計なものをはき出してしまうみたいです。
同じような現象でお困りの方は参考にしてみて下さい。


ちなみに、使ったレンタルサーバーはこちらです。

ドメインはもちろん

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

投稿ナビゲーション