CSS高さ揃え

display:box;
display:-webkit-box;
display:-moz-box;
便利です。
ulとliで利用しました。
(ulにdisplay:box;)。

が、子要素が多いと親要素のwidthをぶっちぎって横並びしますね。
子要素に
display:inline-block;
vertical-align:top;
でやや安定。
親要素のwidthに合わせてリキッドデザインのように複数行に変わる。
その際に発生する、改行=半角スペースをケアしてあげれば、ほぼ望み通りの形に。

<li>...</li
><li>...</li
><li>...</li>

こんな感じ。
まあ、IE6が消えてもまだダメなIEが絶滅してないので、当分スマホ用の書き方だけど。

IE9でグラデーション

モダンブラウザならそのままCSSで。
IE6~IE8はPIE.htcを利用。
IE9はSVGで処理してきたけど、別ファイルを作成するなど、色々手間がかかる。

調べてみると、フィルターを使う方法がよく検索にヒットしたけど、欠点がある。
例えば、ボタンなどでグラデーションを使いたいとき。
フィルターで処理すると、display:blockを指定していても、aタグ内の文字の部分にしかマウスが反応しなくなってしまう。

ので却下。

こちらが良さそう。

SVG Gradient Background Maker

来年のXPサポート終了でIE6もようやく絶滅してくれるが、IE9でさえこの程度のサポート。
IE10はようやくまとも。
でも、問題は古いブラウザを以下に駆逐するか、なんだけどね。
期待するだけ無駄だけど。

placeholderでレイアウトが崩れる

iphoneで確認(safari、chromeとも)。
inputなどにplaceholderでグレー文字を表示させるのは、HTML5から可能になった。
が。
レスポンシブデザインでフォームを作る仕事にて、placeholderに思わぬ落とし穴。

読み込み・・・OK.
iphoneを横向きに・・・OK.
iphoneを縦に戻す・・・NG.

読み込み時OKだったのに、一度横向きにしてから縦に戻すとレイアウトが崩れる。
placeholderを外すと直るので、これが原因だと思われる。

今のところ、placeholderを諦めるしか対応策なし。

早く直してほしい。

IE7,8で半透明画像(png)のopacityをいじる場合

IE7,8で半透明画像(png)のopacityをいじる場合。

普通にやると、半透明の部分が真黒になる。

解決法
AlphaImageLoaderを使う

ただし、色々とクセがあるので注意。

AlphaImageLoaderを使うと、背景に画像を一枚作ってしまう。
そのため、まんま導入すると画像が二枚重なる→半透明の部分が濃くなる

回避方法
AlphaImageLoaderを適用した画像を、透過PNG(1*1px)で置き換える。

その他注意点
aタグでimgを囲んで処理する事が多いが、aタグをdisplay:blockにしておき、widthとheightをimgと同じサイズにしておかないと上手く動かない(要検証)。
さらに、img自体にもcssでwidthとheightを指定した方が無難(要検証)。
過程でアレコレやったのでどれが必須かわからなくなってしまった。

以上をふまえてから、実際にはこんな風に書く。

$(function(){
	fixIeOpacity();
});

function fixIeOpacity(){
	var ua = window.navigator.appVersion.toLowerCase();
	if(ua.indexOf("msie 7.") != -1 || ua.indexOf("msie 8.") != -1){
		$("a img[src *= '.png']").each(function(){
			var src = $(this).attr('src');
			$(this).css({
				'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+src+'", sizingMethod="scale");'
			}).attr("src","../img/cmn/spacer.png");
		});
	}
}

上記、”../img/cmn/spacer.png”が透過PNGなので、それぞれの環境で置き換え。
a img となっているのは、hover時に半透明にしていたため。

もう少しキチンと書かないと汎用性には乏しいけど、同じ症状でハマッた時のヒントにメモっておく。

Ajax使った後のjQueryでのDOM操作

例えばAjaxで読み込んだ部分でclickイベントを拾いたいときは、liveを使えばいいのだけど。
今日はこんな風に書いたら、IE7で動かなかった。

$(function(){
	$(".hoge").live('click',function(){
		var target = $(this).attr('href');
		...略
	
	});
});

IE7だと、’herf’からうまく値を取得できない。(6は無視。)
なんでだー、と考えてたけど、メンドクサイので良く考えずに取得したい値を’herf’ではなく’rel’に設定してみた。
動いた。

一応、メモっておこう。

Facebookのページ統合

忙しくて更新が滞ってるなー。

さてさてまた出たこいつ。

Could not retrieve id for the specified page. Please verify correct href was passed in.

前回は1日放っておいたら直った。
今回は3日経ってもダメだ。

さて、デバッグツールで確認したけど、エラーも警告もでないぞ。
なんで表示されないのか、原因がわからんね。

・・・上場もいいけど、細かいところ丁寧にやって欲しいね。