Studencheskie Programmisty

ちょっとIE7向けにサイトを作らなければならないことがありまして、IE7以上であればli要素への:hoverにも対応しているので、このサイトの左メニューをそのまま採用したわけです。

そうしたら、案の定と言うか大きくわけて2つの問題が発生した。1つは、各項目の間に隙間が生じること。IE7ではli同士の間には隙間は生じないはずなんだけど、なぜかできてしまう。仕方がないので苦し紛れに

*:first-child+html #menu{
   margin-left: -10%;
}
*:first-child+html #menu li{
   margin-top: -1px;
   margin-left: 2px;
}
*:first-child+html #menu ul{
   margin-left: 2px;
}
*:first-child+html #menu > li > ul{
   margin-left: -5%;
}

みたいな感じでとりあえず応急処置をしておいた。原因は未だ不明。

で、ここからが本題なんだが、2つ目は、hoverしていないサブメニューの外枠だけが表示されるというもの。言葉で表すのはちょっと厳しいので以下の画像を見ていただきたい。

これは、一度３つ目の部分までカーソルを動かし、そのまま外に動かしてメニューを閉じ、再び一番左のところにカーソルをのせると発生する。どうやらこれはIE7 ghost bugと呼ばれているらしく、IE7:hover ghosts bugなどで紹介されているが、日本語で説明しているサイトが見つからなかったので記事を書いてみた次第である。

この現象は、前の記事によると、:hover状態ではない要素がhasLayout = trueになっているのがいけないらしい。だが、hasLayout = trueにしないとそれはそれでメニューが展開できない状態になってしまうので、

<ul id="menu">
  <li>
    <a href="#">Alpha</a>
    <ul>
      <li>
        <a href="#">Bata</a>
        <ul>
          <li><a href="#">Gamma</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

というHTMLのとき、CSSを

/* 装飾関連は省略 */
/* 展開処理 */
#menu li > ul{
   width: 12em; /* hasLayoutをtrueに */
   display: none;
}
#menu li:hover > ul{
   display: block;
}

とするのではなく、

/* 展開処理 */
#menu li > ul{
   display: none;
}
#menu li:hover > ul{
   width: 12em;
   display: block;
}

のように、hoverの時のみhasLayoutがtrueになるようにする必要がある。

2月最初の投稿がこれというのもどうかと思うけど。表題のまんま。次は平成33年3月3日とかかねえ。

暦なんて人間が勝手に決めたものだし、ぞろ目になったからどうというわけでもないし、2月23日と今日がどう違うのかといえばまあ対した違いはないだろうけど、それでもやはり記念切符を売り出したりするらしい。

別に買う人が悪いとか、そういうわけじゃないけどなんだかなあ、と。最近何やってたかについてはまたもうちょっとしたら書く（つもり）。

導入したie6-upgrade-warningが実はうまく動いていなかったので、原因を探っていたら、IEのバグらしきものに遭遇した。

具体的には、以下のような感じ。

var input = document.createElement('input');
input.id = "test_i_1";
input.type = "checkbox";
document.body.appendChild(input); //きちんとチェックボックスが追加される

var input = document.createElement('input');
input.id = "test_i_2";
document.body.appendChild(input);
var i = document.getElementById('test_i_2');
i.type = "checkbox";  //エラーがでる

なぜか、getElementByIdしたやつだとDOMがうまく動かないみたい。ちなみに、i.setAttribute("type", "checkbox")でも 結果は同じだった。

やはりIEのDOMはよく分からん...

IE6を使っている人にやんわりアップグレードを勧める8kbの軽量スクリプト『ie6-upgrade-warning』 - IDEA*IDEA ～ 百式管理人のライフハックブログを見て、うちも導入してみることにした。

ただ、私の場合はIEが全般的に嫌いなので全てのバージョンで表示させる方向でｗ

ところどころ改造しています。オリジナル版からの変更点は以下の通り。

• 表示される文
• ブラウザーの選択肢の中からIEを削除
• 「次から表示しない」機能を追加
• 「閉じる」ボタンを追加

「次から表示しない」機能は一応30日間効果（？）が継続するようにしている。動作した時のスクリーンショット。これで少しはIEを使わない人が増えてくれるといいのだけれど。

http://nodaguti.usamimi.info/ にアクセスした時に、単純にリダイレクトするのは面白くないと思ったので「サイト入り口」的な感じにしてみた。

なんとなくフォクすけのロゴを置いてみた。ENTERキーをフォクすけに持たせるのに結構苦労し、かなり時間がかかってしまった。慣れない画像編集なんてしないで素直にそのまま置けば良かった...

本当はふぉくす子を住ませたかったんだけど、画力がだいぶ足りなかったｗ
まあまたそのうちいい画像があったらということで。