Proxyとか

ネット界隈と時事ニュースなどの日常の何気ない話題が中心な信憑性もなければ公平性もない偏った素人のメモ。

 http://fula.jp/ へのリンクはフリーです [メール] [PGP] はこちらよりどうぞ。但し、営利目的の方はご遠慮下さい。    携帯    English    韓国語    中文

<< PHP で利用する ソースコード整形ライブラリ GeSHi library | TOP | TechBase Proxy (DeveloperProxy) >>

[Webprog]  InternetExplorer が white-space:pre; を理解しない件

2006/02/13(Mon) 20:02:36

Internet Explorer は動作モードによっては white-space:pre; を理解しないのには困りました。標準準拠モードでは理解してくれるのですが互換モードだと理解しません。解決方法としてはDOCTYPEスイッチで動作モードを意図的に変えてあげる必要があるようです。動作モードについての詳細は以下の参考リンクより参照下さい。

結論から言いますと当所の場合

  1. <?xml version="1.0" encoding="EUC-JP"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

この様なDOCTYPE宣言をしていますがこの場合 Internet Explorer ではDOCTYPEスイッチが互換モードになってしまう様です。

これを回避する為には

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  2. Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

何と!!XML宣言をはずす事によって標準準拠モードになり white-space:pre; を理解できる様になります。

それにしてもXML宣言を外さないとまともな動作をしない Internet Explorer はやはり変です。XML宣言は基本中の基本なのに Internet Explorer の意図がわかりません。

参考リンク

DOCTYPEスイッチ ◁ The Trap of Web Design
http://www.ichiro.to/note/doctypeswitch

各UAのDOCTYPEスイッチについて
http://www6.plala.or.jp/go_west/nextcss/tip/doctype.htm

User Agent(ユーザーエージェント)で上記を回避するPHPの例

  1. <?php
  2. //ユーザーエージェント別に標準、互換モードの切り分け(DOCTYPEスイッチ)

  3. //ユーザーエージェントを取得
  4. $agent = $_SERVER["HTTP_USER_AGENT"];

  5. //ユーザーエージェントがInternet Explorerなら空
  6. if(preg_match("/¥(compatible¥;¥s(MSIE)¥s([¥d¥.]+)/", $agent))
  7. {
  8. $html_ver = '';
  9. }
  10. //ユーザーエージェントがSleipnirなら空
  11. elseif(preg_match("/^Sleipnir Version ([¥d¥.]+)/", $agent))
  12. {
  13. $html_ver = '';
  14. }
  15. //ユーザーエージェントが上記以外ならXML宣言を入れる
  16. else {
  17. $html_ver = "<?xml version=¥"1.0¥" encoding=¥"EUC-JP¥"?>¥n";
  18. }

  19. //表示部分ヘッダー
  20. $header_html = <<<EOD
  21. $html_ver<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  22. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  23. EOD;
  24. ?>

上記を利用した物が以下にあります。IE系ブラウザと非IE系ブラウザ両方を持っている方はアクセスしてそれぞれのソースを見て頂くとわかると思います。

GET_header_source_capture
http://fula.jp/cgi-bin/head2/

[admin ID:92RrOHSc] [Trackbacks:0] [English]
[記事固有URL:http://fula.jp/blog/index.php?no=r717]
[トラックバックURL:http://fula.jp/blog/ptb.php?no=717]



コメントについての補足事項

  • コメントは誰でもご自由にどうぞ。但し、営利目的の投稿はご遠慮下さい。
  • コメント内のhttp:// から始まる文字は自動リンクします。
  • 自動リンクしたくない場合は先頭に * (アスタリスク)をつけて *http:// としてください。
  • 投稿パスはコメント投稿後に修正、削除などの管理作業を行う時に利用します。
  • 設定した投稿パスは トリップ としても作用します。
  • ご自身で任意のパスワードを設定のうえ投稿して下さい。
  • 誹謗中傷など投稿内容によっては管理人の権限で削除、修正させて頂く場合があります。
  • 日本語を一定数含まない場合や句読点(点や丸)が使われていないコメントは投稿できません。
  • 正規書き込みパスには、はんかくかたかなで のし と記入下さい。スパム対策です。

名前

投稿パス

正規書き込みパス

コメント

確認後 :

投稿後の記事の修正削除

記事番号 : 投稿パス:

上記より投稿時に設定した投稿パスを入力して下さい。修正、削除などの管理作業を行う事が出来ます。

<< PHP で利用する ソースコード整形ライブラリ GeSHi library | TOP | TechBase Proxy (DeveloperProxy) >>

apache_powered.gif php5_powered.gif eaccelerator_powered.gif zend_optimizer_powered.gif xmail_powered.gif opera9_browser.gif

FLEUGELz