先日、初めて気がついたのですが、空白スペースの取り扱いがブラウザによって違うようです。
テーブルタグで表を作成しており、thの横幅を均等に割り当てたいため、文字数を統一するために空白スペースを挿入していたのですが、これをやってしまうと崩れてしまうのです。
例えば、thに「にんじん」「なし」「卵」などと記述する際、最大の文字幅が４文字ですので、半角や全角の空白を入れて「にんじん」「 なし 」「 卵 」などとして全て４文字にして揃えようとしたわけです。
最近はスマホへも対応する必要が出てきましたので、paddingやwidthはできるだけ指定せず、フォントサイズと文字数を調整することでシンプルに対応しようと考えたのです。
けれども、ie、firefox、chromeでそれぞれ表示が違ってきます。
特に、ieの場合、後ろに入れた空白が無視されてしまうようで空白が反映されません。実際参照の空白スペースには、半角「 」はあるものの、全角に該当するものがないため、半角をふたつ入力したりしても効かないようなのです。
なぜ、このような仕様になってしまうのか？
空白を入れたのだから、入れた状態で表示するのが筋ではないかと思うのですが、たぶん、文字を入力した後、間違ってスペースキーを入力してしまうケースもあるから、後ろのスペースをカウントするのは１個だけにしようという趣旨ではないかと思います。
それで解決策を探していたのですが、対応方法はなかったです。
結局、空白スペースで横幅を調整するのはあきらめ、paddingのみで対応することにしました。このpaddingについても、フォントスタイルを揃えておかないと表示が崩れてしまうので注意が必要です。
デフォルトではchromeはメイリオですが、ieなんかはゴシック何とかだと思うので、プロポーショナルフォントと等幅フォントの違いにより、paddingで調整しても表が崩れてしまうようです。