IEでは異なる要素でも同じ名前はダメ。

表題の通りです。

 DIV要素とUL要素で同じ名前にしてやられました。

以下のように指定したとします。

<div id="menu">
<ul id="menu">
<li>
Click Here
</li>
</ul>
</div>

それで、クリック時に呼び出す関数を指定したとします。

    $(document).ready(
 function()
 {
     $("ul#menu > li").click(function(){
     alert("here");
     });
 });

これだと、Firefoxは意図を察して動いてくれるのですが、IEだとだめだめです。

あちゃー　という本日の発見でした。

Newline in select-option tags

Our site had a list of fonts available for our clients. The list included, European and Cyrillic fonts. We put them in a drop-down list.

List of fonts:
     European
     Cyrillic

Then, it turned out to be that Cyrillic fonts were included in European fonts. We had to select/deselect both at the same time. The trouble is, the HTML's select's option does not take br tags, or new lines. All lines have to be in a single line. Here is a jQuery code that select/deselect European and Cyrillic fonts at the same time. The code hooks any click on the European fonts to a handler that select/deselect Cyrillic fonts.

    $('#European').live("click",function(){
     var selected=$('#European').attr("selected");
     if(selected=="selected") 
  {
      $('#Cyrillic').attr("selected","selected");      
  }
     else
  {
      $('#Cyrillic').attr("selected",false);      
  }    
 });

Here is a word of caution; we had yet another problem with the Cyrillic option with the reset operation. The Cyrillic option has to be deselected manually.

    // de-selects the Cyrillic option.
    $("#reset").click(function(){
         $('#Cyrillic').attr("selected",false);      
 });

同じエレメントを指定して、なぜか表示が変わらない。

スタイルシートというのは、いまだ原始的な形態を保ち続け、多少なりとも論理を重視するプログラマ人種にとっての頭痛の種といえるでしょう。進化を続けるネット世界で、基準を設定するのは至難の業、軍閥割拠のジャングルのなかで右往左往してサバイバルゲームを続けるしかない。

で、今日の話題はエレメントの指定方法。スタイルシートで、同じエレメントを指定して、なぜか表示が変わらない。

table.background tr td
{
background-color:red;
}
table.background td
{
background-color:blue;
}

赤い指定をオーバーライドしているのに、これが青くならない。

<table class="background">
<tr><td>test<td>test
<tr><td>test<td>test
</table>

上記のスタイルの指定をよく見てみると、エレメントの指定方法に違いがあります。なぜか tr タグの指定が効いてるんですね。構造を書くと、そちらが優先されるアルゴリズムであるわけです。

これが意味のある基準であるかどうかはさておいて、知っておかないと他人のスタイルシートを使うときに困ることは間違いなしです。

ＤＩＶタグをネストすると、マージンをとった場合にＩＥ７とＦｉｒｅｆｏｘで結果が違う。

Nested DIV -- Firefox3

Nested DIV -- IE7

ＤＩＶタグをネストすると、マージンをとった場合にＩＥ７とＦｉｒｅｆｏｘで結果が違う。ＩＥ７は内部のブロック要素のマージンの長さだけ外部のブロックのサイズを変更する。Ｆｉｒｅｆｏｘでは、なぜか内部のマージンに合わせて外部のブロックも移動する。しかも不可解なことに、外部ブロックにボーダーをつけると位置が移動する。要注意。

ソースはこちら→ div.html

ブラウザ間の差違

ブラウザ間の差違による調整は、ブラウザ開発社が各社で規格を適宜変更するため、困難である。ブラウザ規格が統一されていれば、ページ製作者の苦労は軽減される。ＯＳが統一されていれば、プログラマの仕事の大半がより創造的なものになる。しかし、WindowsおよびＩＥの絶対的な支配権力を要求することは、独裁下の官僚のぐちにすぎない。すべての人間が理解できる程度に同じであることを要求するのは、独裁的支配権を要求するのと同意である。異なる団体間の調整をすることは、同じであることを強要するものではない。しかし、ＩＥのバグをかばわなければならない理由はない。Ｉｎｔｅｒｎｅｔ　Ｅｘｐｌｏｒｅｒには、背景がスクロールで出現したり消えたりするバグがある。ズームを指定すると直るという。ほかに、ＩＥには、改行で隙間が開くというバグがある。さらに、ＩＥでは、ＤＩＶのスタイルがテーブルのスタイルより優先される。

IE8 does not support filter:alpha ...

The hell with it -- IE8 does not support filter:alpha. It works without DOCTYPE specification but not with any of the type being spedified at the top of the page like as you would do just like a good citizen that follow all those laws and orders. Just specify IE7 mode and it works fine with the filter:alpha css or whatever. This. Here.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

IE6で透過PNG

IE6では、そのままでは透過PNGを表示できません。しかし、フィルターを使うと表示が可能です。スタイルシートなどに組み込んで使います。こちらのページでは、ページのヘッダー部分でスタイルを指定しています。

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='title.png');

「IE6でどうやって透過PNG表示するの」
「知らない」
「フィルタ使えばいいんだよ」
「あ、知ってる」
「．．．」