質問者
IE6とIE8での改行表示の差異について

質問
-
初めて投稿します。devhoと申します。
現在、IE6(OS:Windows2000)からIE8(OS:Windows7)の移行作業を行っています。
あるテキストフィールドをWidth=200で定義しているのですが、
IE6で改行される箇所とIE8で改行される箇所が異なります。
そもそもこのような違いが発生する原因はどこにあるのでしょうか?
例:備考というテキストフィールド
IE6:
備考
++++++++++++++++++
|この荷物は9/17までに |
|届けてください。 |
++++++++++++++++++
IE8:
備考
++++++++++++++++++
|この荷物は9/17まで |
|に届けてください。 |
++++++++++++++++++よろしくお願いいたします。
すべての返信
-
devhoさんがITProであることを前提に回答します。
通常はこのような問題は調査コストの大きさから「なぜ」の原因を突き止めるのをやめるのは妥当だと考えていますが、本気でdevhoさんが原因を調査したいと考えているのであれば、原因となる要素を絞るために、再現するための最小サンプル(HTML/CSS)の提示をお願いします。
また、正確な判断をするために、画面キャプチャ(静止画でよいです)の提示をお願います。また、その際はpx単位で確認可能なようにしていただきたいです。画像をアップロードする際には、キャプチャ画像の解像度を小さくしたりするようなWebサイトにはアップロードしないようにお願いします。そしてアカウントや画像ファイルからの情報によって不要な個人情報が漏れないようにお願いします。
ためしにこちらで、以下のようなHTMLファイルを作成したところ、IE6でもIE8でも次のような表示となりました。devhoさんのとは結果が異なりました。++++++++++++++++++++|この荷物は9/17までに届けてく||ださい。 |++++++++++++++++++++
こちらで確認したHTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style> .t{ width: 200px; overflow-y:hidden; /* word-wrap: break-word;*/ /* word-break: keep-all;*/ } </style> </head> <body> <textarea class=t>この荷物は9/17までに届けてください。</textarea></body></html>
【質問1】devhoさんの環境でも同様の表示となりますでしょうか?同じ表示とならない場合はこちらのキャプチャ画面を元に原因を突き止めていきたいと思っています。これに同意出来るのであれば、上記HTMLを読み込んだ時の画面キャプチャの提示をお願いします。
【質問2】devhoさんにご提示いただいた画面を見ると、最初の一行目「この荷物は9/17までに」という文章とテキストフィールドの間に隙間(ソースコードを見ると半角スペースが10個)があるように見えますが、実際もそれと同じでしょうか?通常TextAreaは固定ピッチフォントで、この掲示板に文字を張り付けると可変ピッチとなります(「インターネット」→「フォント」)。
【質問3】devhoさんにご提示いただいたものでは、テキストフィールドの右端のスクロールバーが存在していないように見えます。実際は存在するのでしょうか?それともしないのでしょうか?スクロールバーが存在する場合はWindowsテーマなどによってスクロールバーのサイズは異なったりするわけですが、どのようなサイズとなっていますでしょうか?私の環境では17pxでした。ただし、私の方で提示したものは、スクロールバーを出さないようにするために、overflow-y: hiddenの指定をしています。
-
(´・ω・`)さん
大変ご丁寧に回答いただきありがとうございます。
>devhoさんがITProであることを前提に回答します。
プレッシャーかかりますね(^^;)
【質問1】について
実は私自身、そんなにhtmlに詳しくありません(大汗)ということで、一緒にやっている実装メンバーと、ご提示いただいたサンプルソースをWin2k+IE6、Win7+IE8上で実行しそのキャプチャーを提示します。
2ページで見れると思いますが、どうでしょうか。
ご覧いただくと、Win2k+IE6、Win7+IE8で改行位置が変わりました。やはりAzuleanさんもおっしゃるているとおりフォントの違いによるもののような気がします。見た目も少し違いますし。
【質問2】について
すみません。これは質問欄で全角か半角か忘れましたが、空間を調整する為にスペースを入れたところずれてしまいました。実際の画面ではこのテキストフィールドに自動改行のオプションをしていしています。恐らくその関係で、勝手に改行されているのではと思っています。
【質問3】について
スクロールバーは存在しません。あるテキストフィールドのイメージで書いただけですので。。。
Azuleanさんにも返答させていただきましたが、それほどクリティカルな状況でないので、あまり根本まで突き詰めるつもりは今のところありません。なので、これ以上(´・ω・`)さんのお手を煩わすつもりはなく、一旦この状況でクローズしていきたいと考えています。ありがとうございました。
-
画像に「XP SP3 & IE6 SP3」におけるキャプチャ画面を追加しました。
http://picasaweb.google.co.jp/110427268882378513800/bQyWrK#5519568843277711890
比較してもらえると分かるように、
同じIE6でもWin2kとXPによって改行位置が変わりました。
一方、XP&IE6はWin7&IE8と同じとなっています。
同じIE6でもWin2kとXPではどこが違うのかを調査するため、画像を重ねて確認したところ、次のことが分かりました。
Win2kに関してはdevhoさんのキャプチャ画像を元に記載します。「フォント」→「テキスト形式フォント」は「MSゴシック」です。①ひらがなと漢字に関しては、文字と文字の間の隙間がXPの方がWin2kより1px分広いです。あくまで提示された文字のみを対象に調査しましたが、全ての文字間に言えました。
また、文字自体に関してpx単位で全ての文字が完全一致しました。これは、1dotでも変わった個所がないかを調査しましたが、確認できませんでした。
②半角文字に関しては(つまり「9/17」の部分)、一見、文字自体がXPの方がWin2kより横に広くなっているように見えます。数字はあきらかに太くなっていますし、「/」の角度もXPの方が少し横に寝ていました。
しかし、9/17の両脇の「は」と「ま」の位置の違いはXPの方が5px広がっているだけでした。6pxでも4pxでもなく正確に5pxです。
つまり順当に①を適用したのと同じ結果です。
数字の「9」に関しては、XPの方がかなり横に太く見えますが、元々の「9」と「/」の間の隙間が狭まったように見えるのも影響していそうです。
数字の「7」に関しては、横に広いというよりも縦に短くなったが正解のようです(横も広いですが)。
どちらにせよ文字を表現するための領域の大きさは①でも②でも同じく”半角全角関係なく”1pxずつ広がったようです。③Win2kの方がXPに比べてテキストエリアのエリアサイズが2pxほど狭いように見えますが、その分だけテキストエリアの枠と最初の1文字目(「この荷物」の「こ」)が狭くなっているため、トータルで変更なしのようです(互換モードですし、この辺はスルーで)。
上記が組み合わさったことにより自動改行の位置が変わったようです。私は技術者として、半角文字と全角文字それぞれを1pxずつ横に広げた結果、Windows2000では、半角2文字が全角1文字になっていたはずなのが、XPではそれを満たさなくなったという所を重要視したいですね。
一般にテキストエディタでは半角2文字が全角1文字は当たり前だと考えています。
が、Webページにおけるテキストエリアは表示のためのビューアの要素が大きいという所なのでしょうか。そうはならなくなったようです。
なお、手元のテキストエディタで、文字を「MS ゴシック」で表示するとWin2kの半角文字と同様な文字が表示されます。 -
>devhoさん
文字コードがShift-JISになっているでよろしいでしょうか。またはfont-familyの指定を追加していますかね。
Win7の方も確認した所、結果が完全一致しないことが分かったのですが、文字コードをShift-JISにしたところ、完全一致したためです。
Win7で一致していなかった理由は、UTF8時は半角文字は「Courier New」でしたが、Shift-JISにすると「MS ゴシック」になっていたためでした。
以下のサイトを見るとfont-familyの値をどのような値に設定したのかが重要になるとのことでこちらでもそうなりました。参考:
サイト①:http://www.iecss.com/
→textareaはmonospaceとのことですが、実際のフォントはUTF8時はIE6も8も半角文字は「Courier New」、全角文字は「MS ゴシック」(インターネットオプションのもの)となりました。ShiftJISであれば半角も全角も「MS ゴシック」(インターネットオプションのもの)になりました。ちなみにShiftJISの場合は私の環境では明示的にmonospaceを指定するかによって日本語フォントが変わりました。サイト②:http://www10.plala.or.jp/palm84/css_memo_test_ie8.html
→font-familyに英文フォント→日本語フォントと指定した際に、IE7では「MS Pゴシック」、IE8ではfont-familyに指定した日本語フォントになるとありますが、あくまでpタグやdivタグのみが対象のようです。textareaはIE8であってもIE7と同様の動作になりました。サイト③:http://msdn.microsoft.com/ja-jp/library/ee371240(v=Expression.30).aspx
→font-family省略時のデフォルトは"Times New Roman"とのことですが、確認した所UTF8かつ半角文字かつpタグやdivタグは"Times New Roman"でしたが、UTF8かつ半角文字かつtextareaは「Courier New」でした。先にも書いたように文字コードがShift-JISかつ半角文字かつ任意のタグ時のデフォルトは「MS ゴシック」でした。なお、”UTF8かつ全角文字”と”ShiftJISかつ全角半角文字"は「インターネットオプション」で指定したものでした。・・・まとめますと、フォントは以下の要素の組み合わせによって変わることが確認出来ています。
・IEのバージョン(EmulateIEn)
・Webページの文字コード(charset)
・タグの種類
・font-familyの値
・半角か全角か
・インターネットオプションこの中で自動決定される要素の一部は、Windowsのフォントリンクやペナルティ値(http://msdn.microsoft.com/en-us/library/ms969909)によって異なるでしょうね。
IEの動作を知るうえで重要なのは、どこまでが自動決定でどこまでが自動決定でないのかを知ること思いました。 -
>(´・ω・`)さん
詳細な調査と回答をいただいたにも関わらず、お礼が遅くなり申し訳ございません。
(´・ω・`)さんのご回答は大変参考になり、こちらも大変助かりました。ありがとうございます。
ただ、一点、2番目のご返答で、
>文字コードがShift-JISになっているでよろしいでしょうか。またはfont-familyの指定を追加していますかね。
>Win7の方も確認した所、結果が完全一致しないことが分かったのですが、文字コードをShift-JISにしたところ、完全一致したためです。についてですが、こちらのアプリケーションでは、各画面のヘッダで
<%@ page session="true" contentType='text/html; charset=Windows-31J' %>
と指定していて、マイクロソフトのShift-JISになるようにしています。
なので、Win2kと同じく、文字コードはShift-JISになっておりました。
font-familyの指定もすべて網羅してみたわけではありませんが、MSゴシックで指定しています。