「一日一記事以上を投稿しない」というルールと、「岩木山の写真は、撮った日は必ず貼る」というルールを設けてます。が、最近天気の良い日が続きすぎて、岩木山の写真が連日撮れちゃう→他の記事を投稿できない、という状況に陥りまして、一番見ていただいているIT関係の記事が2週間半書けてないという…。
ネタはいくつもあるにも関わらず、投稿できるのがいつとも知れないというのもストレスなんで、最初の方の禁を破ることとしました。
というわけで。
昨日たっぷり6時間かかった、私にとって新鮮な話題。優等生だとばかり思ってたFirefox君に、まさかこんな欠点があったとは。
$(window).loadでjQuery Masonryを起動するという処理でもって、FirefoxだけitemSelector同士の横の間隔が異常に広くなりまして、いろいろ調べていくと、itemSelector中のある要素にCSSの:first-letterでfont-size:2emとかしてたのが原因らしいと。その要素を.fooとすると、$(window).load時では、.fooのwidthが、.foo{font-size:2em}としたときに等しくなっていいて、$(window).loadを抜けてから本来のwidth、つまり.foo:first-letter{font-size:2em}に戻るみたいなんです。
ググッた結果ここを発見。いつもお世話になっているStack Overflowです。
二人目の回答者による解決がカッコ良すぎて、早速試してみたんですが、私の案件の場合、一瞬正しいwidthで描画されるがMasonry起動時にバラバラになってしまうという状況。レンダリングとwidth値の代入のタイミングが合ってないんでしょうな。
しょうがないんで、一人目の回答者が書いてる、最初の文字だけ<span>で囲っちゃえ方式を採用。まあ、随分と原始的で「not semantic」な方法ではありますが、確実は確実なんですよね。
一応、
if(userAgent.indexOf('gecko') != -1){
$('.foo').each(function(){
var first_letter_span = $('<span>').text($(this).text().charAt(0));
$(this).text($(this).text().substring(1));
$(this).prepend(first_letter_span);
})
}
$('.parent_of_itemSelector').masonry({
// Masonryの起動処理
});
と、動的生成してます。
Firefox以外では「not semantic」にならないように…。
