ウェブル » Browser

IE6 では li の中にブロック化した要素を入れると改行が発生するバグがある

Sorai — Tue, 23 Jun 2009 14:28:54 +0000

以下のように記述すると IE6 でだけ無駄な改行が発生します。いつもながら独自の世界を駆け抜ける IE シリーズには楽しませていただいております。

<ul>
<li><span style="display:block;">テキストA</span></li>
<li><span style="display:block;">テキストB</span></li>
</ul>

解決策は一つ目が以下のように HTML を書く段階で改行させない方法。まぁ IE6 のために時間を潰すのは面倒なので、とりあえず一応以下のように書いた方法だけで正常に表示されるのを確認しました。

1	<ul><li><span style="display:block;">テキストA</span></li><li><span style="display:block;">テキストB</span></li></ul>

あと二つ目は li に padding: 1px; を指定する方法です。隙間が入ってうまい具合にデザインできないのでイライラしますねー。

私は個人制作では IE6 で li の中にブロック化した要素が入っているコンテンツは非表示にします。もしくは放置します。たぶん IE6 を使っている人はこのブログを読んだりしないと思うし、IE6 をバリバリ使ってる人に読んで欲しいとも思わないーなんてことを思ってるわけでもないですが…(笑) 心の奥底では思ってるかもしれませんね…。

IE5.5 IE6 IE7 IE8 の確認が同時にできるアプリケーション IETester

Sorai — Mon, 22 Jun 2009 13:55:01 +0000

IETester は IE5.5 IE6 IE7 IE8 を同時に確認できるアプリケーションです。IE6 で表示確認するためにわざわざ XP を起動したりする必要もこれでなくなります。

IETester をダウンロード

これがなければ IE6 と IE7 を同時に PC 内で起動したり、IE6 の入った PC を別で起動したり、IE5.5 での表示確認は諦めたりといろいろ大変なことばかりだったと思います。これで IE の脅威を半分くらいに抑えられますね。

ちなみに更新をするとページが表示されなくなったり、一定時間たつとエラーで終了してしまったりといろいろ問題もあるみたいなので、完璧とは言えないです。でも少しずつ Web 全体も進化してきてるみたいで毎日が楽しいですねぇ。自分も早く人の役に立つものを作って、世界をよりよくしたいです。

IE で border を指定した時に線と線が繋がるのを防ぐ方法

Sorai — Fri, 29 May 2009 03:56:35 +0000

IE では border で 1px の点線を引くと、スクロールしたりしたときに線と線がくっついて見栄えが悪くなってしまうことがあります。私は Firefox では問題なく表示されるし、たまにしか表示されないので気にしていなかったのですが、今日お客さんから直してくれと頼まれたので直すことになりました。

わざわざくっつかない線を表示するために画像を使うのは嫌なので、CSS でなんとか出来る方法を探していたら以下の方法を発見しました。
タグメモのカケラ | IEで、ボーダーがうまく表示されない

点線を指定している id や class に対して position: relative を指定すると良いそうです。

hoge {
margin: 10px 0;
padding: 10px;
border: 1px #dddddd dashed;
position: relative;
}

でも私の環境では何も解決されませんでした。解決できなかった人は border を 2px にしたりすると解決されますのでいろいろ試してみるのも良いかもしれませんね。何か他にも方法があったら教えてほしいです。

IE6 には box の中で float を使うと背景画像が正しく表示できないバグがある

Sorai — Thu, 26 Mar 2009 09:07:22 +0000

IE6 には box の中で float を使うと背景画像が欠けてしまったり、ずれて表示してしまうなどのバグがありますです。このバグは box に width を指定することによって解決できるようです。

Internet Explorer 8 をアンインストールする方法

Sorai — Mon, 23 Mar 2009 03:39:49 +0000

普通のプログラムのようにアンインストールすることができませんでした。 VISTAの場合なら、コントロールパネル→プログラム→インストールされた更新プログラムを表示→Windows Internet Explorer 8を

初めて Cookie を PHP や Javascript で送信したり削除してサイトをパワーアップ

Sorai — Thu, 19 Mar 2009 04:55:54 +0000

Google で「カロリー」と検索すると検索結果の2番目に出てくる驚異的な個人サイト「食品の摂取カロリー計算」は知らない人はいないほどカロリー系のサイトの中では有名です。このサイトを見習って、私のサイトにもカロリー計算コーナーを設置したいと思います。

食品の摂取カロリー計算では Javascript を使用してカロリーの計算を実現しているようですが、私は Cookie を使ってカロリーデータベースに計算フォームを付けることにしました。

でも Cookie を使うのは初めてなので、いろいろと勉強してみました。一応以下のページにすべてまとめてありますが、詳しく掘り下げて知ろうと思うとこのページだけではダメなので、それを以下にまとめました。
とほほのCookie入門

Cookie には制限がある

1つのクッキーに保存できるのは最大で4096バイト、1台のサーバが同じコンピュータに対して発行できるクッキーの数は20個という制限が設けられています。

PHPスクリプト講座：クッキーについて — そふぃのphp入門より抜粋。

ここで疑問が。以下のどれが正解かわからなくなりました。

サーバーは20個発行したら、それ以上は発行できなくなる。
サーバーは20個発行した後、21個目を1個目を削除し発行する。
ブラウザは同一サーバーから20個 Cookie を受け取ったら、それ以上受け取れなくなる。
ブラウザは同一サーバーから20個 Cookie を受け取ったら、21個目を1個目を削除して受け取る。

もし1と2のどちらかが正解の場合は、共有のレンタルサーバーを使っている人には、事実上 Cookie を使えないということになり、Cookie はちゃんとしたサイトじゃないと使えなくなってしまう。そしてもし3が正解だったら最初に20個発行したもの勝ちになってしまうので絶対違う。

消去法で行くと4つ目の解釈で正しいと思うんですが、今の私にははっきりとした正解はわかりません。
でもとりあえず同じサーバー内の人のサイトには、そう簡単にめぐり合うことはないと思うので大丈夫だと思います。このまま Cookie について勉強していきます。

Cookie を送信する

1
2
3

$name = '名前';
$value = '値';
setcookie($name,$value);

単純にこのような形で送信できます。でも先ほど書いたように同一サーバーから20個しかCookieを送信することはできないので、できるだけ最小限の個数で抑えるために配列を使ったりするのが一般的みたいです。
PHP: setcookie – Manual
PHPスクリプト講座：配列を利用したクッキー — そふぃのphp入門

Javascript を使ってクッキーを送信する

PHP ではより前の部分でクッキーの送信などをしなければいけないので、訪問者にページの表示が完了してから Cookie を送信させるには PHP では不可能です。ということで自ずとJavascript を使うことになるみたいです。Javascript はめちゃくちゃ扱いにくいから、ここ本気出して考えました。

まずはイヌでもわかるJavaScript講座で紹介されているスクリプトをそのまま使ってみるパターン。このサイトはかなり役に立ちました。感謝！

function mySetCookie(myCookie,myValue,myDay){
   myExp = new Date();
   myExp.setTime(myExp.getTime()+(myDay*24*60*60*1000));
   myItem = "@" + myCookie + "=" + escape(myValue) + ";";
   myExpires = "expires="+myExp.toGMTString();
   document.cookie =  myItem + myExpires;
}

スクリプトの解説はイヌでもわかるJavaScript講座にありますので省きますです。
一応私が一番重要(厄介)だと思うところは escape() の部分でして、これは PHP ではデコードすることはできません。でもそれを PHP でもデコードできるようにした人がいました。すごいです。

PHP: utf8_encode – Manual
unescape(PHP)関数 Javascript版escape日本語POST対応 PEAR::HTML_AJAX – PHP::PEAR – dozo PukiWiki


/**
 * Function converts an Javascript escaped string back into a string with specified charset (default is UTF-8).
 * Modified function from http://pure-essence.net/stuff/code/utf8RawUrlDecode.phps
 *
 * @param string $source escaped with Javascript's escape() function
 * @param string $iconv_to destination character set will be used as second paramether in the iconv function. Default is UTF-8.
 * @return string
 */
function unescape($source, $iconv_to = 'UTF-8') {
  $decodedStr = '';
  $pos = 0;
  $len = strlen ($source);
  while ($pos &lt; $len) {
      $charAt = substr ($source, $pos, 1);
      if ($charAt == '%') {
          $pos++;
          $charAt = substr ($source, $pos, 1);
          if ($charAt == 'u') {
              // we got a unicode character
              $pos++;
              $unicodeHexVal = substr ($source, $pos, 4);
              $unicode = hexdec ($unicodeHexVal);
              $decodedStr .= code2utf($unicode);
              $pos += 4;
          }
          else {
              // we have an escaped ascii character
              $hexVal = substr ($source, $pos, 2);
              $decodedStr .= chr (hexdec ($hexVal));
              $pos += 2;
          }
      }
      else {
          $decodedStr .= $charAt;
          $pos++;
      }
  }
 
  if ($iconv_to != "UTF-8") {
      $decodedStr = iconv("UTF-8", $iconv_to, $decodedStr);
  }
 
  return $decodedStr;
}
 
/**
 * Function coverts number of utf char into that character.
 * Function taken from: http://sk2.php.net/manual/en/function.utf8-encode.php#49336
 *
 * @param int $num
 * @return utf8char
 */
function code2utf($num){
  if($num&lt;128)return chr($num);
  if($num&lt;2048)return chr(($num&gt;&gt;6)+192).chr(($num&amp;63)+128);
  if($num&lt;65536)return chr(($num&gt;&gt;12)+224).chr((($num&gt;&gt;6)&amp;63)+128).chr(($num&amp;63)+128);
  if($num&lt;2097152)return chr(($num&gt;&gt;18)+240).chr((($num&gt;&gt;12)&amp;63)+128).chr((($num&gt;&gt;6)&amp;63)+128) .chr(($num&amp;63)+128);
  return '';
}
?>

で、せっかくこういうのを見つけてからアレなんだけれども、PHP を使っているんだったら Cookie に送信する文字列を PHP で事前にエンコードしておけば、Javascript 側で escape する必要がなくなり、結果的に PHP でデコードすることができるようになるので、こっちの方が手早いんではないかと思うのですが実際はどうなんでしょうか……。

Javascript で後から追加する場合の注意点

Javascript で追加すると確かに Cookie は送信されるけどページの再読み込みを行わないと Cookie が送信されたのか訪問者にはわかりません。なので、ページを再読み込みさせる必要があります。Javascript とかいろいろ何が正しいのかわかりませんが、私は Cookie の送信をしたと同時に Javascript の location.reload() でページを再読み込みさせることにしました。
location.reload()?JavaScriptリファレンス

こちらは Web サーバのデータからリロードされ、最新の状態に更新されます。

1	<input type="button" value="計算" onclick="SetCookie('name','value');location.reload(true)" />

こちらはキャッシュからリロードされます。サーバー与える負荷を減らすためにはこちらがいいかもですね。

1	<input type="button" value="計算" onclick="SetCookie('name','value');location.reload(false)" />

Cookie を追加すると同時にページをリロードさせ、Cookie をコンテンツに反映させてます。ちなみに onclick に複数の何かを挿入する場合はセミコロンで区切るらしいです。

追記(2009/4/10): Ajax を使えばページを部分的にリロードして軽量化できる

Cookie を反映させるためにページ全体を読み込むのはスマートじゃありません。あれからいろいろと勉強をして Ajax が使えるようになったので、やる気のある人は Ajax もついでに勉強してみてはどうでしょうか？
Ajax でページの一部だけを部分的にリロードして軽量化したいのだが IE は未対応 | 空が好きな人のメモ帳

Cookie を削除する

クッキーの削除は簡単です。以下のページが丁寧でした。
PHPスクリプト講座：クッキーの削除 — そふぃのphp入門

クッキーの削除の仕方は二通りあり、１つ目は setcookie() でクッキー名のみを指定する方法。

1	setcookie('クッキー名');

2つ目は、有効期限を過去にする。

1	setcookie('クッキー名', '', time() - 1);

Cookie には path がある

とても複雑で意味が分からないんですが、これを完璧に検証してくれた人がいるみたいです。感謝！
Cookie(クッキー)の届く範囲 (あいまいモード)

ただ Javascript での path の指定の仕方がわかりかせんでしたがとほほのCookie入門のテストページのソースにわかりやすくコメントアウトして記述してくれていましたのでなんとか解決。

JavaScriptやCSSで簡単にIE6でアルファ画像(透過png)を使う方法

Sorai — Sun, 08 Mar 2009 09:25:37 +0000

IE6はアルファ画像(透過png)が使えませんが、今回紹介する方法で簡単にIE6でもアルファ画像を使うことができるみたいなので、いつも通りメモしておきます。
ちなみに透過を活用することによって、さらにデザインの幅が広がるかもしれません、あー楽しみかもです。透過を活用したウェブデザインは以下のサイトでいろいろ紹介されています。
透過をきれいに使ったウェブデザインいろいろ | DesignWalker

IE PNG Fix

IE PNG Fix(英語)で簡単にIE6でもアルファ画像を使うことができるようになります。ちなみに2008年7月17日にIE PNG Fix 2が公開されていて、さらに問題点が改善されてるようです。ちなみに以下のページでは分かりやすく導入までの手順を分かりやすく紹介されています。
IE PNG Fix Alpha 2を使ってみた。 | ちぷろぐ

ついでに私もIE PNG Fixの使い方で簡単に導入方法を説明しているので参考にしてみてください。

alphafilter.jsライブラリを使って指定した画像だけに透過処理を与える

これは導入までが簡単。解説も日本語だしclassにalphafilterと追加記述するだけで簡単に処理を行えます。ただし背景画像には対応していないので、背景画像にも透過処理を加えたい場合は先ほど紹介したIE PNG Fixを使うか、さらに追加でCSSに細工をする方法があります。CSSに細工をする方法は後ほど紹介しますです。
アルファ画像を扱うalphafilter.jsライブラリ[to-R]

CSSに細工をする。

細工というかスターハックを使ってIE6にのみ適応するスタイルを記述します。またIE6の独自拡張フィルタなどを使ってあれこれします。
透過pngを表示する-CSS TIPS

それが以下のコードです。

div.alpha{
	width:100px;
	height:200px;
	background:url("alpha.png");
}
* html div.alpha{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale');
	background:none;
}

ですが、このままでは要素に合わせて画像がびよんびよん伸び縮みするので、画像のサイズを変更したくない人は以下のように記述してみます。太字の部分を書き換えました。

div.hoge{
	background:url("alpha.png");
}
* html div.hoge{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hoge.png',sizingMethod='crop');
	background:none;
}

IEの独自拡張機能で良く分かりませんが、以下のサイトが詳しいみたいです。
AlphaImageLoader – filter,フィルタ

いろいろと書きましたが、最初からIE6がなければこんな面倒なことはしなくて良いはず。早くIE7にみんな強制以降させないといけないかもですよ。まぁIE7にもいろいろとバグはあるし、IEを使ってるといろいろと面倒なことが多いはず。みんなが早めにモダンブラウザの良さに気づいて変えてくれれば良いと思いますです。

IE PNG Fix の使い方

Sorai — Sun, 08 Mar 2009 09:06:14 +0000

今回はIE PNG Fixを使ってみたので、使い方をついでにメモしておきました。ちなみにIE PNG Fix 2が去年登場してるみたいなので、ここではIE PNG Fix 2の使い方を紹介します。
IE6 透過PNG表示、IE PNG Fix 2登場 | エンタープライズ | マイコミジャーナル

ダウンロード

Beta Testing Areaにアクセスして、IEPNGFix v2.0 Alphaをクリックしてダウンロードします。

ファイルを組み込む

ダウンロードしたファイルを解凍したらiepngfix.htc、blank.gif、iepngfix_tilebg.jsの3つのファイルを任意のフォルダにコピーします。
そして、CSS内に以下のように記述してiepngfix.htcを読み込ませます。太字のところは自分の環境に合わせて書き換えてください。

1	img, div { behavior: url(iepngfix.htc) }

そしてHTMLのからの部分に以下のように記述します。これも自分の環境に合わせて書き換えてください。

1	<script type=”text/javascript” src=”iepngfix_tilebg.js”></script>

そして最後にblank.gifをiepngfix.htcにちゃんと読み込ませないと、IE6なので透過処理をさせたときに画像が無しみたいな状態になって困るかもなので、ちゃんと読み込ませます。太字の部分がパスになります。絶対パスでの記述が良いと思いますです。

1	IEPNGFix.blankImg = 'blank.gif';

IE6のよく忘れてしまうバグ対策総まとめ

Sorai — Mon, 23 Feb 2009 04:42:09 +0000

IE6 に対する怒りが増し、だんだんと Microsoft に対して良い気持ちが持てなくなってきました。今回はカロリーデータベースの構築中に、こんなことも正しく解釈できないのか……と思わせるほど、あるはずがない、あってはいけないと思ってしまうほど致命的なバグで忘れやすいものを(自分専用に)まとめてみました。

XHTMLを正しく解釈できないIE6対策

この対策は以下のページを参考にさせていただきました。
PHP で IE 6 の後方互換対策 – Heartfield

1	version="1.0" encoding="UTF-8"?>

IE6は上記の様にXML宣言を書いてしまうと「後方互換モード」になってしまい、すべてが終わります。ですからこのXML宣言を抜くしか対処する方法はありませんが、そんなことをすれば他のブラウザに迷惑です。
というわけで、次の様に記述するとIE6の場合だけXML宣言を抜くことができます。(PHP限定)


$ua = $_SERVER['HTTP_USER_AGENT'];
if ( (ereg("Windows",$ua) > 0) && (ereg("MSIE",$ua) > 0)) {
if (ereg("MSIE 6.",$ua) > 0) {
echo '';
}
} else {
echo ''."\n";
}
?>

Widthとborderとpaddingを一緒に指定できないIE6のためのバグ対策

以下のページが大変参考になります。
ADP: IE6のwidth解釈バグ対処法

このバグは有名ですが、私はよく忘れます。頭の中おかしくなっちゃうくらい意味のわからないバグなので、早く何とかしてほしいです。ちなみにPHPの場合上の記述をすれば改善されるかもですね。
次世代ブラウザ Firefox | 高速・安全・自由にカスタマイズ | 人気ブラウザ無料ダウンロード

floatするとmarginを2倍にするIE6のためのバグ対策

前もリンクしたような気がしますが、以下のページが大変参考になります。
IE6のfloatしたボックスのmarginの値が2倍になるバグ対策の件

IE6はCSSのmin-widthやセレクタが使えない。

Sorai — Sat, 07 Feb 2009 11:32:17 +0000

子供セレクタはIE6では使えないようです。このブログでいくつか使用していたため、IE6ではとんでもないレイアウトになってしまいます。
セレクタ（selector） CSS 前提知識

あとmin-widthも使えない。これによって、いろいろとやりたいことが制限されます。このブログもmin-widthが使えないがために、IE6では横幅を強制的に指定することになってしまいました。できるだけFirefoxやIE7などで見てほしいです。

ちなみにmin-widthをIE6で実装する方法について、とても分かりやすくまとめてあり、大変参考になりました。
IE6のmin-width、min-heightハックに関して – Webtech Walker
IE6でmin-widthを実装する方法のまとめ – Webtech Walker

ちなみにNetscapeでも若干レイアウトが崩れます。Webデザインって難しい……。