@nqounetです。

先日、インターネットエクスプローラーの重要性について思い知らされた事がありました。

レイアウトが崩れる

CSSのposition:absoluteで、要素を配置するようなプログラムを作っていたのですが、それがどうもIE11でちゃんと表示されない、という事案が発生しました。

内部向けのツールなので、対応するブラウザはFirefoxだけということだったのですが、よく確認したところ、「IEを捨てるわけじゃない」ということでした。

…日本語は難しいですね。

IEなんてもう誰も使ってないと思ったのですが、世の中はWindows＋IEで回っているみたいですね。

IEではダメだったやり方

mustache.jsを使ってstyle属性を設定し、jQueryで要素を追加していたのだけど、それだとstyle属性が全て無視されてしまっていたようです。

テンプレートのイメージはこう。

1
<div style="{{style}}">中身</div>

値のイメージはこう。

1
{style: 'top:' + top + 'px;left:' + left 'px;width:' + width + 'px;height:' + height 'px'}

IEでもうまく行ったやり方

topとleftのみjQueryのcssメソッドで設定し、widthとheightはjQueryのwidthメソッド、heightメソッドで設定する。

イメージはこう。

1
2
var $el = $('<div>中身</div>');
$el.css({top: top, left: left}).width(width).height(height);

不毛な時間でした

トライアンドエラーを何度も繰り返して、半日は悩んだ気がします。

もちろん仕事なので大事だとは思います。

しかし、テンションが上がらないことだけは確かです。