文字間にスペースを開けるには？

色々試してみてだめでしたらので質問致します。

動作環境：IE7.FireFox3

商品名：○○○○
型□番：△△△△

※□の場所に空白。
※上の三文字と揃うように。

css.htmlどちらを使用してもよいのですが
下記は試した結果です。

<pre>～</pre>
ＩＥで文字が縮小されるので駄目

style="white-space:pre;"
FireFox側が認識せず

style="letter-spacing:1em;"
ＩＥだとＯＫ
FireFoxだと最後の文字の後ろにもスペースがつく

何かよい解決策はないでしょうか？
よろしくお願い致します。
　

No.3 ベストアンサー 回答者： goldfox 回答日時： 2008/06/26 15:35

＞フォントによってpreの動きも変わってしまうんでしょうか？

フォントでは同じ名前で、Pが付くものと付かないものがありますよね。
Pはプロポーショナル（プロポーションといったほうが分かりやすい？）
で、これが付いていると文字と文字の間の余白が同じになるのです。
例えばiのように細い文字の横は詰めて表示させるような。
上手く言えません。参考リンク先のほうが分かりやすいかと。
http://support.microsoft.com/kb/878718/ja

例えば、IEでの表示は基本"ＭＳ Ｐゴシック"。
メモ帳、preは"ＭＳ ゴシック"です。

この回答へのお礼

ご回答有難うございます。
的確な説明で大変よくわかりました！
今まで何気なく使ってたフォントの設定でしたが
これからは意味を理解した上で利用していけると思います。

大変参考になりました！
本当に有難うございました。

お礼日時：2008/06/26 18:59

No.2 回答者： goldfox 回答日時： 2008/06/26 00:12

<pre>～</pre>

＞ＩＥで文字が縮小されるので駄目

preに対し、css指定は？
（'ＭＳ ゴシック'……フォント名の指定が重要かなと）

<pre>あ い う え お<br>かきくけこ</pre>
<pre style="font: 100% 'ＭＳ ゴシック',sans-serif;">あ い う え お<br>かきくけこ</pre>
<p style="font: 100% 'ＭＳ ゴシック',sans-serif;">あ い う え お<br>かきくけこ</p>

この回答へのお礼

ご回答有難うございます。

preに対してMSゴシックの指定ををするとうまく表示されるようになりました。
デフォルトのcss内では
body{
font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
で行っておりました。

フォントによってpreの動きも変わってしまうんでしょうか？

お礼日時：2008/06/26 14:33

No.1 回答者： mako_sea 回答日時： 2008/06/25 19:33

過去の同様の質問がありますが、

参考になりますでしょうか。

参考URL：http://gtubo.gpoint.co.jp/qa1433734.html

この回答への補足

ご回答有難うございます。
残念な事に参考ＵＲＬの通り行っても両ブラウザで対応させる事ができませんでした。

補足日時：2008/06/25 19:57