Twitter Bootstrap（TB）を使ってサイトの構築をよくするのは、過去の記事でも書いていたのですが、
そんな中、IEのみでおこる不思議な現象をご紹介。
PHP＋MySQL＋TBでとある管理画面を構築中のこと・・・
本来はWindows上でhttpdを立ち上げて動作させる予定だったのですが、サーバーが間に合わなかったのでレンタルサーバー上で構築して動作確認をしていました。
レンタルサーバー上での動作確認も一通り終わったところで、実際にWindows上で動かそうと思ったときに、以下の様な現象が起きました。
上の様に表示されなければならないところ、なぜか下の様にデザインが一部崩れて表示されていました。
最初はWindowsのことだから、bootstrap.min.cssなど、「ｍｉｎ」のついたファイルを扱えないのかな？と思いました。
事実、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に表示した状態で、ソースを表示してみました。
すると・・・
あれ？1行目の最初に半角スペースっぽいものが入ってる・・・
ここはPHPで記述している部分ですが、当然半角スペースをはき出す様になんてしてません。
結局PHPより先にDOCTYPEを宣言すると、この現象はなくなりました。
IEは余計なものをはき出してしまうみたいです。
同じような現象でお困りの方は参考にしてみて下さい。
ちなみに、使ったレンタルサーバーはこちらです。
ドメインはもちろん